深入CSS

选择器的特异度

选择器的特异度（Specificity）是指选择器对于特定元素的匹配准确性。在CSS中，选择器用于选择HTML元素并将样式应用于其上。特异度是用来确定当多个选择器同时适用于同一个元素时，哪个选择器的样式会被优先应用的规则。总体上，特异度越高，选择器的优先级就越高，其样式会更具优先权。

继承

在CSS中，继承（inheritance）是一种规则，它决定了元素是否从其父元素继承特定的样式属性。当一个元素应用了某个样式属性，并且该属性被标记为可继承时，子元素将自动继承父元素的相同样式。

不是所有的CSS属性都可以继承，只有一部分属性被定义为可继承的。

<!DOCTYPE html>
<html>
<head>
  <style>
    .parent {
      font-family: Arial, sans-serif;
      color: blue;
    }

    .child {
      /* 子元素继承父元素的字体和颜色 */
    }
  </style>
</head>
<body>
  <div class="parent">
    <p class="child">This is a paragraph.</p>
  </div>
</body>
</html>

在上述代码中，.parent 类定义了一个字体为 Arial、颜色为蓝色的样式。.child 类没有定义任何样式，因此它会从其父元素 .parent 继承字体和颜色。

在 <p> 标签中添加了 class="child"，这样该段落就成为 .parent 的子元素，并继承了父元素的字体和颜色。

通过显式继承，无需为每个子元素重复设置相同的样式，而是可以借助父元素的样式来实现共享和统一的外观。

初始值

CSS 中的初始值（initial value）指的是元素在未应用任何样式时所具有的默认值。当为元素设置样式时，如果没有明确指定某个属性的值，该属性将采用其初始值。以下是一些常见 CSS 属性的初始值示例：

font-size：medium （浏览器默认字体大小）
color：initial （浏览器默认文本颜色）
font-weight：normal （普通字体粗细）
display：inline （元素以行内方式显示）
position：static （元素使用正常文档流布局）
- margin：0 （外边距为 0）
padding：0 （内边距为 0）

布局（Layout）

包括常规流、浮动和绝对定位。

CSS border-box 是一个盒模型属性，用于控制元素的盒模型计算方式。默认情况下，CSS 盒模型会将元素的宽度和高度包括内容区域、内边距和边框，而 border-box 可以改变这种计算方式。

使用 box-sizing: border-box; 将元素的盒模型设置为 border-box，意味着元素的宽度和高度将包括内容区域，并且内边距和边框不会增加元素的尺寸。换句话说，这样设置后，元素的总宽度和高度将等于指定的宽度和高度，无论添加了多少内边距和边框。

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 2px solid black;
  box-sizing: border-box;
}

在上述代码中，.box 类定义了一个宽度为 200px、高度为 100px 的盒子，并添加了 20px 的内边距和 2px 的边框。由于应用了 box-sizing: border-box; 属性，内边距和边框不会增加盒子的尺寸，而是从指定的宽度和高度中减去。

这种设置使得布局更加直观和可控，特别是在响应式布局中常用。通过将元素的盒模型设置为 border-box，可以更容易地管理元素的宽度和高度，而无需考虑内边距和边框对尺寸的影响。

第六届字节跳动青训营第三课 | 青训营

深入CSS

选择器的特异度

继承

初始值

布局（Layout）