这是我参与「第四届青训营」笔记创作活动的的第3天

CSS进阶

CSS选择器优先级

样式的优先级一般为

!import > style > id > class > 元素

在实际运用中会遇到多类选择器判断优先级的问题

优先级由A、B、C、D四个值进行判断，其中对应值计算规则如下：

如果存在内联样式则A为1，否则为0；

B为ID选择器出现的个数；

C为类选择器、属性选择器、伪类选择器出现的个数；

D为标签选择器和伪元素选择器出现的个数

将ABCD进行按顺序进行组合，组合数字最大的，优先级更高，当优先级相同时，遵循后面的优先级更高的原则。

CSS样式属性

覆盖

当样式属性相同的情况下，遵循优先级高的覆盖优先级低的，后面的覆盖前面的这个原则。

继承

某些属性会自动继承其父元素的计算值，除非显性指定一个值（使用inherit属性值来进行显式继承）。

初始值

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

CSS求值过程

如图所示，是一个CSS的属性计算过程，其流程描述如下：

HTML解析成DOM树，解析过程中将从CSS中搜集的样式放在一起组成样式规范；

对样式规范进行筛选，获得符合规则的一组声明值；

按照优先级顺序选出优先值最高的属性值即层叠值；

若层叠值为空，此时采用继承或使用初始值的方法得到指定值（指定值一定不为空）；

将一些相对值转换为绝对值，从而获得计算值（此时，属性值之中的关键字、百分比等还没有转换）；

进一步将计算值转换从而获得使用值（此时的使用值中存在小数）；

将小数转换为整数，从而得到实际值。

计算值和使用值的区别：单纯的分析CSS和HTML就可以得到的值即为计算值，使用者需要结合实际环境才能得到的值为使用值。继承的属性值为计算值。

布局

布局是什么

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

布局的相关技术

盒模型

盒模型一共有两种，分别为content-box 和 border-box，上图就是一个content-box盒模型。

这两种盒子模型都是由content + padding + border + margin组成，但是不同的是，他们的width和height的计算方式不同。

在content-box盒中，width和height只包含content；

在border-box盒中，width和height由content + padding + border组成。

需要注意的是，当width和height的值设为百分比时，其基数取决于父元素的对应属性，而当padding、margin、border取百分比的时候则基数都取决于父元素的width。

盒模型的转换可以使用box-sizing属性进行转换，对应值分别为content-box和border-box。