CSS

前端盒子模型是网页布局的基础概念，对于前端开发者来说，理解盒子模型是至关重要的。 1. 盒子模型的组成部分 内容（Content）: 盒子中实际显示的文本或图像部分。内容区的大小由 width 和 height 属性确定。 内边距（Padding）: 内容与边框之间的空间。它用于增加内容与边框之间的距离，可以通过 padding、padding-top、padding-right、padding-bottom 和 padding-left 属性进行设置。 边框（Border）: 环绕在内边距和内容周围的边界。可以设置边框的宽度、样式和颜色。相关属性包括 border、border-width、border-style 和 border-color。 外边距（Margin）: 盒子外部的空间。用于控制元素与元素之间的间距。可以通过 margin、margin-top、margin-right、margin-bottom 和 margin-left 属性进行设置。 2. 标准盒子模型与替代盒子模型 标准盒子模型（content-box）: 默认的盒子模型。width 和 height 只包含内容区，不包括内边距和边框。因此，元素的实际占用空间是 width + padding + border。 替代盒子模型（border-box）: 通过设置 box-sizing: border-box，使得 width 和 height 包括内边距和边框，这样内容区的大小会自动调整以适应总高度和宽度。这样做通常可以避免许多布局问题。 示例 .box { box-sizing: content-box; /* 默认值 */ width: 200px; padding: 20px; border: 5px solid black; } 在标准模型下： 总宽度 = 200px + 20px (左内边距) + 20px (右内边距) + 5px (左边框) + 5px (右边框) = 250px .box { box-sizing: border-box; /* 替代模型 */ width: 200px; padding: 20px; border: 5px solid black; } 在替代模型下： ...

什么是伪类和伪元素？ 伪类：以冒号(:)开头，用于选择处于特定状态的元素。 伪元素：以双冒号(::)开头，用于在文档中插入虚构的元素。 这么说有点抽象，我们来看具体案例。例如下面的伪类语法表达的意思是：文档里的那些已经被用户访问过的 a 标签，当鼠标悬浮在它上面的时候，颜色为红色。 a:visited:hover { color: red; } 效果如下： 可以看到，无论是 visited还是 hover，都表示了 a 标签的某种状态，选择器始终选择的是伪类前面的元素，只不过当出现伪类描述的状态时，样式才生效而已。 注意，上面使用的是无痕浏览器打开的页面，是不可能出现 visited 状态的，因为无痕不记录访问历史，我们可以点击控制台的 :hov 图标手动勾选 :visited 和 :hover 来模拟 a 标签「已访问」和「悬浮」两种状态。 我们再来看一下伪元素的案例，下面的语法表达的意思是： div 标签里面首字的颜色为红色。 div::first-letter { color: red; } 效果如下： 与伪类不同的是，首字并不是 div 元素的某种状态，而是浏览器创建出来的一个虚拟的元素，我们可以在上图的右下角看到 Pseudo ::first-letter element提示，相当于浏览器自动选中了「彻」字。 注意：::first-letter 伪元素只作用于块状元素上面，如果把 div 换成 span，就无法选中首字了，除非手动设置 span 的 display 属性为 block 或 inline-block 等块状值。 从上面的案例当中，我们可以得出两个结论： 伪类用于向某些已经存在的选择器添加特殊效果（当状态改变时） 伪元素用于将特殊效果添加到不存在的虚拟元素中（浏览器自动创建） 也就是说伪类的本质还是类（class），作用于标签本身，只不过限定了状态条件；而伪元素的本质是元素（element），作用于该虚拟元素的内容本身。 伪类有哪些？ 按照功能，可划分为以下几类： 动态伪类：:visited、:focus、:hover等 状态伪类：:disabled、:empty、:required 等 结构伪类：:first-child、:nth-of-type等 其他伪类：:target、:lang、:not()等 下面的表格详细记录了各种伪类及其描述： 伪类 描述 兼容性 :active 元素处于活动状态时 ✅ :focus 元素已获取焦点时 ✅ :hover 元素处于悬浮状态时 ✅ :link 链接未访问时 ✅ :visited 链接已访问时 ✅ :first-child 元素是首个子元素时 ✅ :last-child 元素是最后一个子元素时 ✅ :nth-child() 元素是第 n 个子元素时 ✅ :nth-last-child() 元素是倒数第 n 个子元素时 ✅ :only-child 元素是唯一子元素时 ✅ :first-of-type 元素是首个特定类型的子元素时 ✅ :last-of-type 元素是最后一个特定类型的子元素时 ✅ :nth-of-type() 元素是第 n 个特定类型的子元素时 ✅ :nth-last-of-type() 元素是倒数第 n 个特定类型的子元素时 ✅ :only-of-type 元素是唯一的特定类型的子元素时 ✅ :not 不满足指定条件时 ✅ :target 元素 id 匹配到哈希值时 ✅ :root 元素是文档树的根元素时 ✅ :lang() 匹配到指定语言时 ✅ :empty 元素处于没有子元素状态时 ✅ :invalid 和 :valid 表单项是否有效 ✅ :required 和 :optional 表单项是否必填 ✅ :in-range和 :out-of-range 表单项是否超出范围 ✅ :read-only和 :read-write 表单项是否只读 ✅ :enabled和 :disabled 表单项是否禁用 ✅ :fullscreen 当前处于全屏显示模式时 ⚠️ :blank 输入框处于输入为空状态时 ❌ :dir() 匹配到特定文字书写方向时 ❌ 上表中的兼容性表示： ...

CSS选取器分类 通配符选择器 *{ margin:0; padding:0; } 元素（标签）选择器 p{ color:red; } 类选择器 .warning{ color:red; } ID选择器 #warning{ color:red; } 优先级 !important>行内样式>ID选择器>类、伪类、属性>元素、伪元素>继承>通配符 属性选取器 示例html <ul> <li foo>1</li> <li foo="abc">2</li> <li foo="abc efj">3</li> <li foo="abcefj">4</li> <li foo="efjabc">5</li> <li foo="ab">6</li> </ul> [attribute] [foo]{ background-color:red; } 选择所有带 foo 属性的元素 [attribute=value] 选择 attribute=value 的所有元素。 [foo=abc]{ background-color:red; } [attribute~=value] 选择 attribute 属性包含单词 value 的所有元素。 [foo~=abc]{ background-color:red; } [attribute^=value] 选择其 attribute 属性值以 value 开头的所有元素。类似正则的 ^,以什么开始 ...

在前端面试中，经常会遇到CSS选择器的问题三连： 说一下CSS的选择器有哪些 优先级是怎样的 权重计算方式 今天就来给大家介绍选择器的优先级和权重计算方式。 优先级是什么？有什么用？ 先提出一个问题：如果一个元素通过多种方式设置了字体大小，那么浏览器在最后渲染时会使用哪个属性值呢？ 其实，浏览器会通过优先级来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。 换种说法，优先级就是分配给指定的 CSS 声明的一个权重，它由 匹配的选择器 中的 每一种选择器类型的数值 决定。 总结一下： 权重决定了你css规则怎样被浏览器解析直到生效，css权重关系到你的css规则是怎样显示的。 当很多的样式被应用到某一个元素上时，权重决定哪种样式生效。 每个选择器都有自己的权重。你的每条css规则，都包含一个权重级别。 这个级别是由不同的选择器加权计算的，通过权重，不同的样式最终会作用到你的网页中 。 如果两个选择器同时作用到一个元素上，权重高者生效。 权重的计算规则 接着介绍权重的计算规则： 第一优先级：!important会覆盖页面内任何位置的元素样式 内联样式，如style="color: green"，权值为1000 ID选择器，如#app，权值为0100 类、伪类、属性选择器，如.foo, :first-child, div[class="foo"]，权值为0010 标签、伪元素选择器，如div::first-line，权值为0001 通配符、子类选择器、兄弟选择器，如*, >, +，权值为0000 继承的样式没有权值 权值计算公式： 权值 = 第一等级选择器 x 个数，第二等级选择器 x 个数，第三等级选择器 x 个数，第四等级选择器 x 个数 比如： 选择器 千位 百位 十位 个位 优先级 h1 0 0 0 1 0001 h1 + p::first-letter 0 0 0 3 0003 li > a[href*=“en-US”] > .inline-warning 0 0 2 2 0022 #identifier 0 1 0 0 0100 内联样式 1 0 0 0 1000 权重的比较规则 当两个权值进行比较的时候，是从高到低逐级将等级位上的权重值（如 权值 1,0,0,0 对应–> 第一等级权重值，第二等级权重值，第三等级权重值，第四等级权重值）来进行比较的，而不是简单的 1000个数 + 100个数 + 10个数 + 1个数 的总和来进行比较的，换句话说，低等级的选择器，个数再多也不会越等级超过高等级的选择器的优先级的。 ...

什么是 font 属性？ 在CSS中， font 属性是一个简写属性，用于设置字体的多个相关属性，包括字体大小、字体样式、字体粗细、字体系列等。使用 font 属性可以方便地在一个声明中设置多个字体相关的样式。 font 属性的语法 font: [font-style] [font-variant] [font-weight] [font-size] [line-height] [font-family]; 各个属性的详细说明 font-style：设置字体的样式。 取值： normal：正常字体（默认值）。 italic：斜体字。 oblique：倾斜字体。 font-variant：设置字体的变体。 取值： normal：正常（默认值）。 small-caps：小型大写字母。 font-weight：设置字体的粗细。 取值： normal：正常粗细（默认值）。 bold：加粗。 bolder：比父元素更粗。 lighter：比父元素更细。 数值：可以使用 100 到 900 的数值，100 为最细，900 为最粗。 font-size：设置字体的大小。 取值： 可以使用绝对单位（如 px、 pt）或相对单位（如 em、 rem、 %）。 line-height：设置行高。 取值： 可以使用数值、单位（如 px、 em）或百分比。 font-family：设置字体系列。 取值： 可以指定多个字体名称，以逗号分隔，浏览器将使用第一个可用的字体。 例如： "Arial", "Helvetica", sans-serif。 使用 font 属性的注意事项 font 属性必须按照特定的顺序书写，尤其是 font-size 和 font-family，它们是必需的。 如果使用 font 属性，其他相关的字体属性（如 font-size 和 font-family）不能单独设置。 实例：使用 font 属性设置文本样式 HTML 代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Font 属性示例</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1 class="title">欢迎来到我的网站</h1> <p class="description">这是一个关于CSS字体属性的示例，展示如何使用font属性设置文本样式。</p> </body> </html> CSS 代码（styles.css） body { font-family: Arial, sans-serif; /* 设置全局字体 */ } .title { font: bold 24px/1.5 "Helvetica Neue", Arial, sans-serif; /* 设置标题字体样式 */ color: #333; /* 字体颜色 */ } .description { font: italic normal 16px/1.8 "Georgia", serif; /* 设置描述文本字体样式 */ color: #666; /* 字体颜色 */ } 解释 HTML结构：我们创建了一个包含标题和描述的简单网页。 CSS样式： 在 .title 类中，使用 font 属性设置了字体为加粗、24px大、行高为1.5、字体系列为 "Helvetica Neue"，后备字体为 Arial 和无衬线字体。 在 .description 类中，使用 font 属性设置了字体为斜体、正常粗细、16px大、行高为1.8、字体系列为 "Georgia"，后备字体为衬线字体。 结果 通过以上代码，浏览器将展示一个标题和描述文本，标题为加粗大字体，描述为斜体较小字体。这样可以清晰地展示不同文本的样式和视觉层次感。 ...

引言 在日常前端开发中，经常需要进行背景或背景图的处理。但是大多数前端er并未真正清楚背景的正确使用方式。经过本章的学习，相信你一定可以解决99%的背景处理问题。 一：简单使用 背景颜色和背景图片是可以共同出现的 div { width: 300px; height: 300px; background-color: red; background-image: url(./imgs/1.jpg); background-repeat: no-repeat; } 页面展示 一：background-repeat background-repeat决定背景图片的平铺方式 属性值 background-repeat:repeat (默认值) background-repeat:no-repeat (不平铺) background-repeat:repeat-x （水平方向平铺） background-repeat:repeat-y （垂直方向平铺） 1. repeat 默认情况下，如果背景图片不能铺满整个盒子时，系统会在水平和垂直方向同时平铺直到覆盖整个盒子 div { width: 300px; height: 300px; background-color: red; background-image: url(./imgs/1.jpg); background-repeat: repeat; } 2.repeat-x 如果背景图片不能将盒子的水平方向铺满，则在水平方向采取平铺处理直到铺满盒子的水平方向。 div { width: 300px; height: 300px; background-color: red; background-image: url(./imgs/1.jpg); background-repeat: repeat-x; } 3.repeat-y 如果背景图片不能将盒子的垂直方向铺满，则在垂直方向采取平铺处理直到铺满盒子的垂直方向。 div { width: 300px; height: 300px; background-color: red; background-image: url(./imgs/1.jpg); background-repeat: repeat-y; } 二：background-position background-positiont决定背景图片在盒子区域的定位位置。其方位由水平和垂直决定 1.px设置 px决定了背景图片在盒子水平和垂直方向偏移指定px的距离。 div { width: 300px; height: 300px; background-color: red; background-image: url(./imgs/1.jpg); background-repeat: no-repeat; background-position: 100px 100px; } ...

CSS 中 position 属性用于指定元素的定位方法的类型（static、relative、absolute、fixed、sticky）。 静态定位 position: static 此属性未 HTML 元素默认定位，一个元素没有以任何特殊的方式定位，它总是按照页面的正常流程定位。 在此属性下，属性值 top、left、right、bottom 和 z-index 对HTML元素没有影响。 <div class="parent"> <div class="child"></div> </div> <div class="sibling"></div> <style type="text/css"> .parent { width: 480px; height: 320px; background-color: #008800; } .child { width: 240px; height: 160px; background-color: #ff0000; } .sibling { width: 240px; height: 160px; background-color: #0000ff; } </style> 效果如图： 为什么使用它呢？将元素设置为 position: static 的唯一原因是强制删除应用于无法控制的元素上的某些定位。 相对定位 position: relative 此属性相对于其正常位置的，在不改变布局的情况下根据元素的当前位置定位元素。 ...

如果问，CSS 中 position 属性的取值有几个？大部分人的回答大概是 static、relative、absolute、fixed，实际上MDN上还有一个 sticky。 今天我们就来给大家介绍这个容易被忽视的position属性值 sticky。 先来看看MDN上对于 sticky 的介绍： 粘性定位元素（stickily positioned element）是计算后位置属性为 sticky 的元素。 粘性定位可以被认为是相对定位和固定定位的混合。 什么是结合两种定位功能于一体呢？ 元素在跨越特定阈值前为相对定位，之后为固定定位。 也就是元素先按照普通文档流定位，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。 元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。 这个特定阈值指的是 top、right、bottom 或 left 之一，换言之，指定 top、right、bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。 示例 上面的文字描述估计还是很难理解，看看下面这张 GIF 图，想想要实现的话，使用 JS + CSS 的方式该如何做： 按照常规做法，大概是监听页面 scroll 事件，判断每一区块距离视口顶部距离，超过了则设定该区块 position:fixed，反之去掉。 而使用 position:sticky ，则可以非常方便的实现： <div class="container"> <div class="sticky-box">内容1</div> <div class="sticky-box">内容2</div> <div class="sticky-box">内容3</div> <div class="sticky-box">内容4</div> </div> .container { background: #eee; width: 600px; height: 1000px; margin: 0 auto; } .sticky-box { position: sticky; height: 60px; margin-bottom: 30px; background: #ff7300; top: 0px; } div { font-size: 30px; text-align: center; color: #fff; line-height: 60px; } 看看上面的 CSS 代码，只是给每个内容区块加上 ...

1、普通流（常规流） 文档流（流式布局）分为 普通流、定位流、浮动流，不同流内的块级元素和行内元素的布局方式不同，布局方式用 FC（格式化上下文，含有 块级格式化上下文、内联格式化上下文、层叠格式化上下文、灵活格式化上下文等）来命名； 普通流中的布局规则默认为块级盒子从上到下，垂直排列；内联盒子从左到右，水平排列等；（书写模式（writing-mode）会对流布局产生影响； 2、position 属性有： static：默认值，元素依然按照 普通流 的定位规则定位； relative absolute sticky fixed 使用 position 会脱离常规流，成为定位流，并有其自己的定位规则； 3、float 属性有： left right none inherit 使用 float 会脱离常规流，成为浮动流，并有其自己的定位规则； 4、table 使用 HTML 标签来布局； <table> <tr> <th></th> <th></th> </tr> <tr> <td></td> <td></td> </tr> </table> 5、flex 2009 年 W3C 提供的方案，注意只有 IE 10+ 支持 flex； 重要的概念：flex 容器，flex 项目，主轴，交叉轴； 设置某个元素的属性 display: flex;，此元素就成了 flex 容器，flex 容器内的元素是 flex 项目； flex 容器的属性： flex-direction flex-wrap flex-flow justify-content align-items align-content flex 项目的属性 flex （flex-grow、flex-shrink、flex-basis） order align-self 6、grid 二维布局方式，相对于使用 HTML 结构实现的 table 布局，grid 布局都是在 CSS 中完成的； ...

大家可能觉得，z-index 是一个很简单的属性，你给它设置哪个值，元素就会位于 y 轴的哪个位置。但它实际上并没有我们想象的这么简单，这个属性背后是一系列决定元素所在层级的规则。 在进行今天的介绍前，我们先列出三个问题，如果你能一眼看出它们的解决方案，那么恭喜你掌握了z-index，也就不需要阅读本文了；如果不行，那么耐心看完本文，相信能找到答案。 三个自测问题 问题一：为什么z-index 数值更大，但 Content 没有在 Box 2 之上？ <div id="box1"> Box 1 </div> <div id="content"> Content <br/> z-index: 2; </div> <div id="box2"> Box 2 <br/> z-index: 1; </div> div { padding: 25px; font-size: larger; } #box1 { background-color: chocolate; width: 200px; height: 100px; margin-bottom: -50px; } #content { background-color: gold; width: 300px; height: 200px; z-index: 2; } #box2 { background-color: cyan; width: 200px; height: 100px; margin-top: -50px; z-index: 1; } 问题二：明明 z-index 数值更小，为什么 Content 这次反而在Box 2 之上了？ <div id="box1"> Box 1 </div> <div id="content"> Content <br/> transform: rotate(90deg); <br/> z-index: 1; </div> <div id="box2"> <br/> Box 2 <br/> z-index: 2; </div> div { padding: 25px; font-size: larger; } #box1 { background-color: chocolate; width: 200px; height: 100px; margin-bottom: -10px; } #content { background-color: gold; width: 250px; height: 200px; z-index: 1; transform: rotate(90deg); } #box2 { background-color: cyan; width: 200px; height: 100px; margin-top: -10px; z-index: 2; } ...