层叠、相对单位及盒模型是CSS最基本的部分。

1 基础

1.1 层叠、优先级和继承

层叠是指多个css样式在对同一个元素配置同一属性时，依据权重来处理冲突。

权重判断：

1. 样式表来源：浏览器默认样式及开发时定义的样式。
2. 选择器优先级。
3. 源码顺序。

图 层叠的优先顺序

!import: 标记重要的声明。优先级最高。

元素状态的优先级：link < visited < hover < active （记忆口诀 LoVe/HAte）

开发过程中尽量不要使用id选择器及!import。

1.1.1 继承

如果一个元素的某个属性没有层叠值，则可能会继承某个祖先元素的值。并不是所有属性都能被继承。

inherited	继承祖先的层叠值。这个关键字可以继承默认不被继承的属性。 .con {   height: inherited; }
initial	将属性的值重置为默认值。(每个CSS属性都有初值值) .con {   height: initial; }

表 inherit 与 initial关键字

1.1.2 简写属性

简写属性是用于同时给多个属性赋值的属性，比如background。

1. 简写属性会默默覆盖其他样式。尽管可以省略一些值，但这些省略的值会被隐式地设置为初始值。
2. 简写值的顺序。如果值的类型不同，则属性的顺序可以随意。例如，border: 1px solid black; 等价于 border:black 1px solid; 否则需要遵循约定的顺序，有以下两种：

1. 上右下左。（可以缩写，只有三个值时，左边和右边会使用第2个值；只有两个值时，上下使用第1个值，左右第2个值， 只有一个值，上下左右共用这个值）
2. 水平、垂直(这两个值代表了笛卡尔网络)。

1.2 相对单位

em	1em 等于当前的字号。适合基于特定字号进行排版。 使用em定义字号时，例如 font-size: 1.2em; 表示字号大小为继承的字号 * 1.2。
rem	参照根元素的字号。
vh	1vh = 视口高度的 1/100。
vw	1vw = 视口宽度的1/100。
vmin	视口宽、高中较小的一方的1/100。
vmax	视口宽、高中较大的一方的1/100。

图 相对单位

1.2.1 无单位的数值和行高

有些属性允许无单位的值。例如 line-height（也可以有单位）、z-index、font-weight等。

使用无单位的数值时，继承的是声明值，即每个继承子元素上会重新算它的计算值。

图 无单位的数值和行高

1.2.2 css变量

定义一个变量，只需像其他CSS属性那样声明，但变量名前面必须有两个连字符： “--”。变量必须在一个声明块内声明（即选择器，它会决定变量的作用范围。）。调用变量时需要使用var函数。

    :root {
        --custom-color: red;
    }
    .block1 {
        color: var(--custom-color);
        --custon-font-size: 20px;
        font-size: var(--custon-font-size);
    }
    .block2 {
        font-size: var(--custon-font-size); // 不生效
    }

1.3 盒模型

盒模型是指将HTML元素看作一个盒子，它包括边距、边框和内容。

图 盒模型

content-box	指定的宽或高只会设置盒子内容的大小。
border-box	指定的宽或高是内容+内边距+边框的总和。

表 盒模型的行为

box-sizing: border-box; (设置盒模型的行为，默认为content-box)

1.3.1 等高列

可以使用display:table; 或display: flex; 实现等高列。

表 display: table与display:flex 实现等高列

vertical-align: middle; 垂直居中只会影响行内元素或table-cell元素。

1.3.2 负外边距

图 负外边距

外边距可以设置为负值：

1. 如果设置left或top的负外边距，元素会相应向左或向上移动。
2. 如果设置right或bottom的负外边距，元素并不会移动，而是会将它后面的元素拉过来。
3. 块级元素如果不指定宽度，则它会填充容器的宽度。如果设置左右负外边距，则它都会扩展到容器外。

1.3.3 外边距折叠

当顶部和底部的外边距相邻时，外边距会折叠，取这两者最大值作为两者相距距离。即使这两个元素不是相邻的兄弟节点。

图 外边距折叠

图 外边距折叠失效的情况

1. 对容器使用overflow:auto(或其他非visible值)。
2. 两个外边距之间加上边框或内边距。
3. 容器为浮动元素、内联块、绝对定位或固定定位。
4. 弹性和网格布局内的元素之间。
5. table-cell 元素（其不具备外边距属性）。

注意：1、2、4情况中，子元素的下外边距与容器的下外边距仍会发生折叠。