层叠

声明冲突：同一个样式，多次应用到同一个元素

层叠：解决声明冲突的过程，浏览器自动处理（权重计算）

1. 比较重要性

重要性从高到底：

作者样式表：开发者书写的样式

1）作者样式表中的!important 样式 2) 作者样式表中的普通样式 3) 浏览器默认样式表中的样式

2. 比较特殊性

看选择器

总体规则：选择器选中的范围越窄，越特殊

具体规则：通过选择器，计算出一个 4 位数（x x x x）

千位：如果是内联样式，记 1，否则记 0
百位：等于选择器中所有 id 选择器的数量
十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量
个位：等于选择器中所有元素选择器、伪元素选择器的数量

3. 比较源次序

代码书写靠后的胜出

应用

重置样式表

书写一些作者样式，覆盖浏览器的默认样式

重置样式表 -> 浏览器的默认样式

常见的重置样式表：normalize.css、reset.css、meyer.css

爱恨法则

link > visited > hover > active

继承

一般字体相关的都可以继承。 font text-align color

行高

line-height

px, 像素值
无单位的数字

css

p {
  line-height: 2; /*先继承，再计算。  16px * 2 = 32px*/
}

em 单位

css

p {
  line-height: 2em; /*先计算，再继承  计算出字体大小 16px * 2 = 32px  再让元素继承*/
}

百分比和 em 一样

html

<style>
  .container {
    /* 行高为字体大小的两倍 */
    /* 先计算像素值，再继承 */
    /* line-height: 2em; */

    /* 行高为字体大小的两倍 */
    /* 先继承，再计算 */
    line-height: 2;
  }
  .p1 {
    font-size: 40px; //如果是数值的话，会先将2继承到这里，再计算40*2=80px。
  }

  .p2 {
    font-size: 12px;
  }
</style>

<body>
  <div class="container">
    <p class="p1">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet molestiae
      sed doloremque sapiente? Explicabo, quidem itaque, repudiandae fugiat
      impedit suscipit, amet inventore necessitatibus pariatur iste quisquam
      laborum hic aperiam ab.
    </p>
    <p class="p2">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur earum
      corporis, eius, ut ratione nihil exercitationem cum voluptatibus et velit
      repellat debitis esse praesentium odio provident ex totam, delectus
      expedita.
    </p>
  </div>
</body>

层叠 ​

1. 比较重要性 ​

2. 比较特殊性 ​

3. 比较源次序 ​

应用 ​

继承 ​

行高 ​

层叠

1. 比较重要性

2. 比较特殊性

3. 比较源次序

应用

继承

行高