选择器的特异度

对于多条指向同一元素的有冲突的 CSS 规则，浏览器会按照某些规则来选择 CSS 规则然后对元素进行渲染。而这些规则就和特异度有关。

选择器	id	class	标签
特异度	1	2	2

某一条 CSS 规则可能包括多个/多种选择器，将其特异度相加（或组成一个多位数），值大的作为最终渲染规则。

继承

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

继承也可以显式继承：属性值写inherit。此外 CSS 中每个属性都有一个初始值，也有显式写法：initial。

CSS 求值过程：

graph TD
DOM树 --> filtering
样式规则 --> filtering
filtering --> cascading --> defaulting
defaulting --> resolving --> formatting
formatting --> constraining --> 实际值
筛选:选择器匹配,属性有效,符合当前media等,得到0/多个声明值 --> filtering
按照来源,!important,选择器特异性,书写顺序等对以上声明值选出优先级最高的属性值,得到一个层叠值 --> cascading
当这个值为空的时候进行继承或者使用初始值,得到一个指定值 --> defaulting
经过以上步骤,该值已确定且不为空,然后将一些相对值或者关键字转化为绝对值,比如em转为px,相对路径转为绝对路径,得到一个计算值 --> resolving 
然后对计算值进一步转换,比如把关键字,百分比等也都转为绝对值得到一个使用值 --> formatting
使用值若含有小数像素值,需再转为整数,最后得到实际值 --> constraining

布局

含义：

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

相关技术

• 常规流：行级、块级、表格布局、FlexBox、Grid布局，根元素、浮动和绝对定位的元素会脱离常规流
• 浮动
• 绝对定位

行级：不和其他盒子并列摆放，适用所有的盒模型属性。只包含行级盒子的容器会创建一个Inline Formatting Context (IFC)

IFC 内的排版规则：

• 盒子在一行内水平摆放
• 一行放不下时，换行显示
• text-align 决定一行内盒子的水平对齐
• vertical-align 决定一个盒子在行内的垂直对齐
• 避开浮动(float)元素

块级：和其他行级盒子一起放在一行或拆开成多行，盒模型中的 width 和 height 不适用。某些容器会创建一个 Block Formatting Context (BFC)

BFC 内的排版规则：

• 盒子从上到下摆放
• 垂直 margin只合并
• BFC 内盒子的 margin 不会与外面的合并
• BFC 不会和浮动元素重叠

Flex Box： 可以控制子级盒子的以下内容：

• 摆放的流向
• 摆放顺序
• 盒子宽度和高度
• 水平和垂直方向的对齐
• 是否允许折行

Grid： display 设置为 grid 使元素生成一个块级的grid容器，使用 grid-template 相关属性可以将容器划分为网格。

CSS盒子模型：（蓝色部分为内容 Content 的 width 和 height）

display属性：

• block：块级盒子
• inline：行级盒子
• inline-block：本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
• none：排版时完全被忽略