深入CSS | 青训营

1. CSS 选择器的特异度

在CSS中，选择器的特异度（Specificity）用于确定样式规则应用于哪个元素，当多个规则应用于同一个元素时，特异度决定了哪些规则具有更高的优先级。

特异度可以用四个值（a，b，c，d）来表示，其中：

• a代表内联样式的特异度。内联样式是直接应用于元素的样式，特异度最高。
• b代表ID选择器的特异度。ID选择器是通过#符号定义的样式选择器，例如#myElement，在整个文档中只能匹配一个元素。
• c代表类选择器、伪类选择器和属性选择器的特异度。类选择器是通过.定义的样式选择器，伪类选择器是以:开头的选择器，而属性选择器是通过方括号[]来定义的选择器。
• d代表元素选择器和伪元素选择器的特异度。元素选择器是指对元素类型进行选择，例如p、div等，而伪元素选择器是以::开头的选择器，如::before和::after。

特异度的计算规则如下：

1. 对于每个a，b，c和d，初始值为0。
2. 对于选择器中的每个ID选择器，增加b的值。
3. 对于选择器中的每个类选择器、伪类选择器和属性选择器，增加c的值。
4. 对于选择器中的每个元素选择器和伪元素选择器，增加d的值。

特异度计算的比较方式是先比较a的值，再比较b的值，然后是c的值，最后是d的值。在比较时，较大值的特异度选择器优先应用。

2. CSS 继承

CSS继承是指子元素从父元素继承某些样式属性值的机制。当某个元素应用了一些样式属性，其子元素在没有显式定义这些属性时，会继承父元素的属性值。

不是所有的属性都可以继承，只有部分属性是可以继承的，例如：

• 字体相关属性，如font-family、font-size、font-weight等。
• 文本相关属性，如color、line-height、text-align等。
• 某些列表属性，如list-style-type和list-style等。

而像width、height、margin、padding等属性就不会被子元素继承，子元素需要显式地设置自己的值。

需要注意的是，继承是单向的，子元素可以继承父元素的样式，但父元素不会继承子元素的样式。

3. CSS 求值过程解析

CSS的求值过程指的是浏览器在渲染网页时，如何根据样式规则将样式应用到相应的元素上。这个过程包括以下几个步骤：

1. 收集样式规则：当浏览器解析HTML文档时，会将遇到的CSS样式规则收集起来，建立一个样式规则表（Style Rule Table）。
2. 确定适用规则：对于每个元素，浏览器根据元素的标签、类名、ID等信息，结合CSS选择器的特异度，确定适用于该元素的样式规则。
3. 解析继承：如果元素的某些样式属性没有显式定义，浏览器会查找该元素的父元素是否定义了这些属性，如果有，就将父元素的属性值应用到该元素上。
4. 计算样式：经过继承后，浏览器会计算元素最终的样式属性值，考虑特异度和继承的影响。
5. 渲染页面：最后，浏览器使用计算得到的样式属性值来绘制页面，将元素呈现在用户界面上。

4. CSS 布局方式及相关技术

CSS布局是指在网页中排列和定位元素的过程，实现网页的整体结构和样式。常见的CSS布局方式及相关技术包括：

• 块级布局（Block Layout）：使用块级元素（<div>等）创建垂直方向的布局，每个块级元素占据一行，可以通过设置width属性控制其宽度。
• 行内布局（Inline Layout）：使用行内元素（<span>等）创建水平方向的布局，元素会在同一行内排列，并根据内容自动调整宽度。
• 弹性布局（Flexbox）：使用display: flex来创建灵活的布局，可以在一维方向上对元素进行排列。通过设置父容器的justify-content和align-items等属性，可以控制元素在主轴和交叉轴上的对齐和分布。
• 网格布局（Grid Layout）：使用display: grid来创建网格化的布局，可以在二维方向上对元素进行排列。通过设置网格的行和列，以及grid-template-areas来定义元素的位置。
• 浮动布局（Float Layout）：使用float属性将元素浮动到指定位置，常用于实现文字环绕效果或多栏布局。但是浮动布局会影响元素的正常文档流，并需要注意清除浮动。