深入CSS（上）｜青训营选择器的特异度在CSS中，选择器的特异度决定了多个规则应用到同一元素时，哪条规则将优先生效

选择器的特异度

在CSS中，选择器的特异度决定了多个规则应用到同一元素时，哪条规则将优先生效。

一般来说，特异度值越高的选择器，其规则优先级越高。如果两个规则具有相同的特异度，后面的规则会覆盖前面的规则。

特异度：选择器中 id 、（伪）类、标签的个数组成的三位数。

#nav .list li a:link：

1个id（#nav）、2个（伪）类（.list,a:link）、 2个标签（li,a），特异度 122

.hd ul.links a:

0个id、2个（伪）类（.hd,.links）、2个标签（ul,a），特异度022

#nav .list li a:link 优先级更高

<button class="btn">普通按钮</button>
<button class="btn primary">主要按钮</button>
<style>
  .btn {
    display: inline-block;
    padding: .36em .8em;
    margin-right: .5em;
    line-height: 1.5;
    text-align: center;
    cursor: pointer;
    border-radius: .3em;
    border: none;
    background: #e6e6e6;
    color: #333;
  }
  .btn.primary {
    color: #fff;
    background: #218de6;
  }
</style>

.btn.primary 的特异度比 .btn 要高，color: #fff; background: #218de6 会覆盖 background: #e6e6e6; color: #333

继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值。

一般与文字相关的属性都可以继承（如 color, font-size），但与盒模型相关的属性不能继承（如宽度）。

<p>This is a <em>test</em> of <strong>inherit</strong></p>

<style>
  body {
    font-size: 20px;
  }
  p {
    color: blue;
  }
  em {
    color: red;
  }
</style>

strong没有设置颜色，继承父元素<p>的color: blue

显式继承

让不可继承的元素从父级继承，可以使用 inherit 属性值设置。

* {
  box-sizing: inherit;
}

通配选择器*内指定了所有元素的 box-sizing 从父元素继承。

初始值

CSS 中，每个属性都有一个初始值
- background-color 的初始值为 transparent
- margin-left 的初始值为 0
可以使用 initial 关键字显式重置为初始值
- background-color: initial

当一个元素不可继承且没有设置属性，或可继承但没有继承到，使用初始值。

CSS 求值过程

计算值与使用值的区别：

计算值：浏览器在获得 CSS 后，单纯分析 CSS就能够马上转化出来的相对值，可在 resolving 阶段进行处理。
使用值：需要实际布局时才能决定，在 formatting 阶段进行转化。
一些可以继承的属性是继承于父级元素的计算值。

布局

布局是什么

确定内容的大小和位置的算法
依据元素、容器、兄弟节点和内容等信息来计算

布局相关技术

C(9PX5XG9MVXNNI1CD~%S98.png

浮动：可以把一些元素设计成浮动，例如将图片设置成浮动，可以做文字环绕图片的效果。
绝对定位：可以直接覆盖在常规流之上，改变元素位置不会对常规流造成影响。

常规流——盒模型

width

指定 content box 宽度
取值为长度、百分数、auto
auto 由浏览器根据其它属性确定
百分数相对于容器的 content box 宽度

height

指定 content box 高度
取值为长度、百分数、auto
auto 取值由内容计算得来
百分数相对于容器的 content box 高度
容器有指定的高度时，百分数才生效

padding

指定元素四个方向的内边距
百分数相对于容器宽度

10px：上下左右内边距都为 10px

10px 20px：上下内边距为 10px，左右内边距为 20px

10px 20px 10px 20px：上、右、下、左（顺时针方向）内边距依次为 10px、20px、10px、20px

border

指定容器边框样式、粗细和颜色（none 无边框、solid 实线、dashed 虚线、dotted 点划线）

当四条边框颜色不同时：

当高度与宽度都为 0：

把其中三条边设为透明：

margin

指定元素四个方向的外边距
取值可以是长度、百分数、auto
百分数相对于容器宽度

使用 margin:auto 水平居中。将左右外边距都设置为 auto 可以实现水平居中。

<div></div>

<style>
  div {
    width: 200px;
    height: 200px;
    background: coral;
    margin-left: auto;
    margin-right: auto;
  }
</style>

margin collapse 外边距折叠：上下两个元素的间距是 100px，而不是 200px。边距并不会相加，而是选择最大值作为边距。

<div class="a"></div>
<div class="b"></div>

<style>
  .a {
    background: lightblue;
    height: 100px;
    margin-bottom: 100px;
  }

  .b {
    background: coral;
    height: 100px;
    margin-top: 100px;
  }
</style>

box-sizing: border-box

border-box 指定的宽度高度是包含 content、padding、border的宽度高度。实际的项目中，border-box 用的更多

<style>
  html {
    font-size: 24px;
  }

  .a {
    width: 100%;
    padding: 1em;
    border: 3px solid #ccc;
  }

  .b {
    box-sizing: border-box;
    width: 100%;
    padding: 1em;
    border: 3px solid #ccc;
  }
</style>

a 指定的 width 是 content 的宽度，实际显示会超出 100%

b 指定的 width 是包含了border、padding 在内的宽度，元素设置为了 boder-box ，指定的 width 是边框的宽度，实际显示就占 100%

overflow

当 content 的内容超出了所设置的高度和宽度，可以通过 overflow 来设置溢出的内容如何展示。

visible（默认）：内容不会被修剪，会呈现在元素框之外
hidden：内容会被修剪，超出部分内容不可见
scroll：增加滚动条显示
auto：当内容超出对象的尺寸时才会显示滚动条

块级 vs. 行级

Block Level Box 块级盒子	Inline Level Box 行级盒子
不和其他盒子并列（并排）摆放	和其他盒子一起放在一行或拆开成多行
适用于所有的盒模型属性	盒模型中的width、height不适用（行级中的高度、宽度是由内容决定的）

块级元素	行级元素
生成块级盒子	生成行级盒子；内容分散在多个行盒 (line box) 中
body、article、div、main、section、h1~6、p、ul、li 等	span、em、strong、cite、code 等
display: block	display: inline

display 属性

block：将元素转化成块级盒子
inline：将元素转化成行级盒子
inline-block：本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行（如一张图片只能够占据一行，而不会被拆成多行）
none：排版时被完全忽略

学习心得：

了解选择器的特异度，可以更好地掌握CSS规则优先级，避免样式冲突和优先级混乱。合理地使用继承可以减少冗余的样式代码，使CSS更简洁和易于维护。合理使用overflow属性可以确保元素内容的显示效果更加符合需求，同时保持页面布局的整洁。

深入CSS（上） ｜ 青训营