深入解析CSS—基础

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

1 基础

1.1 层叠、优先级和继承

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

权重判断：

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

图层叠的优先顺序

!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。

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

上右下左。（可以缩写，只有三个值时，左边和右边会使用第2个值；只有两个值时，上下使用第1个值，左右第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函数。

css 复制代码

    :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); // 不生效
    }