示例代码： div class="border p-3">这是一个带边框和内边距的容器。div> div class="border-top m-2">这是一个带顶部边框和外边距的容器。...div> 这些类可用于微调元素的边框和间距，使页面看起来更整洁。 响应式设计 Bootstrap 的全局 CSS 样式还包括响应式设计，这意味着页面会根据不同设备的屏幕尺寸自动适应布局。...为了创建自定义样式，您可以在项目中添加自己的 CSS 文件，并覆盖或扩展 Bootstrap 提供的样式。...在本文中，我们深入了解了排版、字体、链接、按钮、背景、颜色、边框、间距和响应式设计的相关内容。...希望这些信息能帮助初学者更好地理解和应用 Bootstrap 的全局 CSS 样式，以创建具有吸引力和一致性的网页。
$event.stopPropagation() } 也可以对比$event对象中的target和currentTarget属性是否相同，因为这两个属性分别代表触发事件的dom节点与响应事件的当前节点...datepicker时，踩了一些坑，如下： 只有设置了position属性的元素的z-index才会生效 当父容器的z-index小于元素A时，其子容器的z-index无论多大都无法覆盖元素A 最佳实践 实现具有下拉菜单展开特效的组件时...div> div class="dropdown-list"> ......border属性对边框进行设置时，可能会发现，每个单元格的上边框和左边框都没有达到理想的效果，但是下边框和右边框却是正常的。...扩展 input
1.响应式排版 传统上，JavaScript 用于根据屏幕尺寸操纵字体大小。随着CSS自定义属性（变量）和clamp()函数的出现，响应式排版变得轻而易举。...font-size: clamp(var(--base-font-size), 5vw, var(--base-font-size * 1.25)); } CSS自定义属性和clamp()创建一个响应式且可扩展的排版系统...JavaScript 即可流畅且具有交互性。...9.渐变边框 传统上，实现渐变边框涉及复杂的 CSS 或 JavaScript 解决方案。随着 conic-gradient 属性的出现，我们无需任何脚本即可创建渐变边框。...涵盖的主题： 无需 JavaScript 的响应式排版：探索 CSS 自定义属性和用于创建响应式和可扩展文本的clamp（）函数的世界。
利用伪元素、关键帧动画，你将具有强大的创造力，本文就是一个例子。本例中，利用两者，就可以构建一个加载动画，无需任何JS代码和图片。...CSS不允许按我们的想法直接动画操作 div.logo的边框。所以，我们必须从矩形上移除边框，寻求不同的方法创建它，一种可以动画操作的方法。 或许我们可以将边框打散成一个个小块，让它们循序地显现？...div.logo::before绝对定位于 div.logo左顶角，将显示顶部边框和右边框。 div.logo::after定位于右底部，显示底部和左边框。...我们为桔色、白色矩形重复同样的过程，最后获得我们想要的结果： [running code can not be loaded.] ---- 往期精选文章 使用虚拟dom和JavaScript构建完全响应式的...UI框架 扩展 Vue 组件 使用Three.js制作酷炫无比的无穷隧道特效 一个治愈JavaScript疲劳的学习计划 全栈工程师技能大全 WEB前端性能优化常见方法 一小时内搭建一个全栈Web应用框架
什么是盒子模型 盒子模型又称为框模型，HTML页面所有的元素都具有盒子模型，该模型用于设计HTML页面和实现HTML页面布局。 ?...（无默认值，必须直接给出） 边框的颜色（默认值是黑色） 显示效果：同时设置上下左右四个方向的边框 div{ border: 10px solid black; } 组合属性 以上简写属性相当于同时为一个...假如border-image-width大于已指定的border-width，那么它将向内部(padding/content)扩展....在最终的边框图像中重复，缩放或修改它们以匹配元素的尺寸。 区域 9 为中心区域。它在默认情况下会被丢弃，但如果设置了关键字fill，则会将其用作背景图像。...应用示例 实现三角形 实现步骤 div的宽高为0 设置边框的宽度 设置边框样式 设置颜色 border-color: white white white black;/* 左边为黑色
虽然另一个折叠了，以适应其空的 alt 属性的内容，但由于它的边框，导致了它作为一个小点出现。 但是，当存在 alt 属性值时，它将如下所示： ? 这不是很好的反馈吗？...1.4 响应式图片 ? 的优点在于，可以针对特定视口大小将其扩展为具有多个版本的图片。例如，这可用于商品图片。...我们的目标是要有一个与图像相融合的内部边框，具有实边是不实际的。...4.3.2 使用具有 div> 的 现在的问题是，要添加内边框，我们不能使用内部 box-shadow，因为它对图像不起作用。...Demo 4.3.3 具有CSS背景的 div> 如果我要使用 div> 来显示头像，则可能表示该图像具有装饰性。我记得一个用例，它是分散在页面中的随机头像。 ?
可以使用CSS的grid布局来实现响应式的等高的多列布局。...可以使用CSS的媒体查询和flexbox布局来实现一个响应式布局。...伪类（pseudo-class）是指用于向某些选择器添加特殊效果的关键字，它们以冒号（:）开头，例如:hover、:active、:focus等。...伪元素（pseudo-element）是指用于向某些选择器添加特殊效果的关键字，它们以双冒号（::）开头，例如::before、::after、::first-letter等。...BFC具有以下特性： 内部的盒子会在垂直方向上一个接一个地放置。 属于同一个BFC的两个相邻盒子的上下外边距会发生重叠。 BFC的区域不会与浮动元素重叠。
工具类：除了常见的样式属性外，Tailwind CSS 还提供了丰富的实用工具类，如布局、间距、边框等，这些工具类可以帮助开发者快速地实现响应式设计和布局。...响应式设计：Tailwind CSS 内置了响应式设计的工具类，使得开发者可以轻松地编写出适配不同屏幕尺寸的样式。...插件系统：Tailwind CSS 具有强大的插件系统，允许开发者编写定制的插件来扩展框架的功能，例如添加新的样式类或工具类。...类来设置按钮的背景颜色为蓝色，text-white 类来设置文本颜色为白色，font-bold 类来设置文本加粗，py-2 和 px-4 类来设置垂直和水平方向上的内边距，rounded 类来设置圆角边框...primary 的自定义颜色；同时扩展了字体配置，添加了一个名为 sans 的自定义字体。
盒阴影与文本阴影一样，都可以代替具有阴影效果的图片来使用，以减少页面对服务器的请求压力。在使用方面来说，text-shadow 是用来制作文本阴影，而box-shadow主要实现的是图层阴影。...3.3 盒阴影与边框的比较 首先来看一个使用盒阴影制作的带有边框的效果，如下： .wrap div:nth-child(3) { box-shadow: 0 0 0 1px red; }...对的，box-shadow不单可以制作出阴影的效果，还可以利用其扩展半径这个值，来给对象制作出类似于边框的样式。...实际上利用box-shadow来制作边框，只能说看上去像边框，但实质其并非边框，它和border还是有本质上的区别的。...从上图中可以发现左右两边的模块有点参差不齐，如果需要这种不齐的效果更明显一些，只需要把其扩展半径值变大，使得两者之间的相差更大即可，如： .wrap div:nth-child(5) { box-shadow
display: inline-block; 解释：将元素的显示类型设置为 inline-block，使其既具有行内元素的特性（可以在同一行显示多个元素），又具有块级元素的特性（可以设置宽度、高度等属性...定义了一个具有边框、背景色、文字颜色和其他样式的列表项样式，用于在容器内的特定情境中显示。...color: #f89898; 这行代码设置文本颜色为 #f89898，与上面边框的颜色相同，以保持颜色一致。...因此，这个样式的效果是，在选中状态下，带有current类的元素将拥有一个红色的粗边框，白色的背景，红色的文本，并且文本会以粗体显示。...处理请求和响应数据： axios 可以自动解析响应数据，例如将 JSON 数据解析为 JavaScript 对象。
* 导航栏距离页面顶部的距离为0像素 */ left: 0; /* 导航栏距离页面左边的距离为0像素 */ width: 100%; /* 导航栏的宽度设置为100%，以充满整个屏幕宽度...，半径为10像素 */ box-shadow: 0 0 10px #ccc; /* 边框阴影:没有位移（水平和垂直均为0），具有10像素模糊程度的浅灰色阴影 */ } .sidebar {...，半径为10像素 */ box-shadow: 0 0 10px #ccc; /* 边框阴影:没有位移（水平和垂直均为0），具有10像素模糊程度的浅灰色阴影 */ } 响应式布局 考虑在手机端...，半径为10像素 */ box-shadow: 0 0 10px #ccc; /* 边框阴影:没有位移（水平和垂直均为0），具有10像素模糊程度的浅灰色阴影 */ }...，半径为10像素 */ box-shadow: 0 0 10px #ccc; /* 边框阴影:没有位移（水平和垂直均为0），具有10像素模糊程度的浅灰色阴影 */ }
：选择器 + 大括号，大括号里面书写 css 属性样式，键值对 key : value 以冒号 : 分隔，每条属性之间要用分号 ; 分隔 body { background-color:red;...// 背景颜色为红色 color: white; // 字体颜色为白色 } 而 CSS 选择器类型一般有三种，分别是 标签选择器、ID 选择器 和 类选择器，需要注意的是，ID 选择器以 # 号开头...，扩展到元素边框的外边界（但不包括外边距），如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色 background-color 的值有一般三种设置方式：① 关键字，颜色名称的背景颜色，比如...，如果只设置一个值，则第二个值会被设置为 "auto" cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，背景图像的某些部分也许无法显示在背景定位区域中 contain 把图像图像扩展至最大尺寸...url("img/1.png") no-repeat 50% 50%; border:1px solid red; 一般来说，图片是跟内容相关的，具有具体信息的，就使用 标签进行引入，若是装饰性的
选择器 css3中新增了一些选择器，主要为如下图所示： 新样式 边框 css3新增了三个边框属性，分别是： border-radius：创建圆角边框 box-shadow：为元素添加阴影 border-image...有以下可能的属性： background-size: contain; 缩小图片以适合元素（维持像素长宽比） background-size: cover; 扩展元素以填补元素（维持像素长宽比） background-size...，边框实际上并不是一个直线，如果我们将四条边设置不同的颜色，将边框逐渐放大，可以得到每条边框都是一个梯形。...特点：改变元素透明度，元素不可见，占据页面空间，可以响应点击事件。...LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。 8. 怎么实现单行、多行文本溢出隐藏？
内联样式通过style属性来设置，如下所示： 这是一个标题 在上面的例子中，元素具有内联样式，文本颜色被设置为蓝色。 4.... div class="my-class">这是一个样式化的区块。div> 这两个元素都应用了.my-class类定义的样式规则。 5....div> 6. CSS 盒模型 CSS盒模型是理解Web页面布局的关键。每个HTML元素都被视为一个矩形的盒子，它由内容、内边距、边框和外边距组成。...边框：内边距外部的边框，可以设置边框的宽度、样式和颜色。 外边距：边框外部的空间，用于控制元素与其他元素之间的间距。 通过CSS，你可以控制和调整盒模型的各个部分，以实现所需的布局效果。...响应式设计 响应式设计是一种使网页能够适应不同屏幕尺寸和设备的技术。通过使用CSS媒体查询（media queries），你可以根据屏幕宽度、高度和其他属性来应用不同的样式规则。
背景尺寸 可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px 也可以填百分比: 按照父元素的尺寸设置. cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域...elements 查看标签结构 console 查看控制台 source 查看源码+断点调试 network 查看前后端交互过程 application 查看浏览器提供的一些扩展功能...solid 实线边框 dashed 虚线边框 dotted 点线边框 颜色: border-color div>testdiv> div { width: 500px; height...stretch：项目被拉伸以适应容器（默认）。 flex-start：项目在交叉轴的起点对齐。 flex-end：项目在交叉轴的终点对齐。 center：项目在交叉轴上居中对齐。...> 响应式网格布局 创建一个响应式网格布局，项目根据屏幕宽度自动换行： .grid-container { display: flex; flex-wrap: wrap; gap: 10px
CSS边框 本节回顾两个属性border-radius、box-shadow 属性 描述 扩展 border-radius 给div元素添加圆角的边框 border-radius 属性是一个最多可指定四个...)、ease-out(动画以低速结束)、ease-in-out(动画以低速开始和结束) | |animation-fill-mode|规定当动画不播放时（当动画完成或者延迟未开始播放时），要应用到的元素的样式...指定了列与列之间的边框样式（solid | dotted） column-rule-color 指定了两列的边框颜色 column-rule 是上述三个属性的缩写 column-span...outline-offset 对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓 19.CSS3图片 响应式图片 img{ max-width:100%; height:auto...响应式图片相册 在这里正确用好这几个属性：box-sizing:border、@media、clear:both 20.CSS3多媒体查询 CSS3多媒体类型 值 描述 all 用于所有多媒体类型设备
响应式图像 ? 的优点在于可以针对特定视口大小将其扩展为具有多个版本的照片。...我们的目标是使内部边框与图像融合在一起，这种不太实用。 使用 和 div> 元素 现在的问题是，要添加内部边框，我们不能使用box-shadow，因为它无法在图像上使用。...解决方案用div>包裹 头像中，并添加专用于内部边框的元素。...>上使用透明度10%黑色的边框，我们可以确保边框与深色图像融合，并且只有在图像较亮的情况下才可见。...使用div>与CSS背景 如果我要使用div>来显示头像，则可能表示该图像具有装饰性。 我记得一个用例，它是分散在页面中的随机头像。 ?
内边距（Padding）：内容区域与边框之间的空间，内边距可以使内容与边框之间保持一定的距离。通过 padding 属性设置，四个方向的内边距可以单独定义或使用简写属性一次性设置。...边框（Border）：围绕内边距和内容区域的边框，边框的样式、宽度和颜色可以通过 border 属性设置。 外边距（Margin）：元素与相邻元素之间的空间，外边距用于调整元素的位置。...例如：div>, , 等。它们具有以下特性： 宽度：默认情况下，宽度自动扩展以填满父容器的宽度。可以通过 width 属性调整。...内边距、边框、外边距：这些属性的设置影响元素的总高度和总宽度。 示例代码： Box 1div> div class="inline-block-box">Box 2div> div class="inline-block-box
浮动和清除浮动：了解浮动属性和清除浮动的方法，以实现元素的自适应布局和多列布局。...内联块状元素（inline-block elements）：内联块状元素结合了块级元素和内联元素的特性，可以设置宽度、高度、内外边距等属性，同时以行的形式显示在页面上。...知识扩展: 1.定宽块元素与不定宽块元素的居中对齐方法: /* # 1.定宽的块元素可以通过margin设左右auto模式来进行设置居中 */ div { width: 100%; margin...，所以在实现响应式布局事会非常烦人，需要时刻注意到这个元素的边框和内边距。...136px Content box width: 160px Content box height: 80px */ } /* 替代IT盒模型, 始终在一个区域范围内，在响应式设计时非常有用
语义化标签语义化 HTML 是指使用具有明确含义的标签来构建网页结构，比如header表示网页的头部，nav表示导航栏，section表示页面中的一个章节，article表示独立的、自包含的内容区域，footer...div { width: 200px; height: 100px;}示例二：内边距的存在可以使内容与边框之间有一定的间隔，避免内容过于靠近边框，从而提升页面的美观度和可读性。...div { border: 1px solid black; /* 1 像素宽的黑色实线边框 */}示例四：外边距是元素边框与周围元素之间的空白区域。...响应式设计响应式也是CSS中很重要的内容，媒体查询（media queries）：根据不同屏幕尺寸和设备特性应用不同的CSS样式。百分比宽度：使用百分比而非固定像素来定义元素宽度。...最后，作为前端开发者只有通过不断学习和实践，我们才可以不断提升自己的技能，以适应不断变化的技术环境和用户需求。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
