这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天
深入CSS
选择器优先级/特异性
important > 内联 > id > (伪)类 > 标签 > 通配符
继承与初始值
某些属性会自动继承其父元素的计算值，除非显式指定一个值。
一般与文字相关的属性可继承，如color，而与盒模型相关的属性不被继承，如width
可通过设置inherit属性值来显式继承
初始值
CSS中，每个属性都有一个初始值
- background-color 的初始值为 transparent
可以使用initial关键字显式重置为初始值
- background-color: initial;
求值过程
-
获取DOM树与样式规则
-
filtering
对应用到该页面的规则用以下条件进行筛选：选择器匹配、属性有效、符合当前media等
得到声明值，Declared Values，一个元素的某属性可能有0到多个声明值。比如
p {font-size:16px}和p.text {font-size:1.2em} -
cascading
按照来源、!important、选择器特异性、书写顺序等选出优先级最高的一个属性值
得到层叠值，Cascaded Value，在层叠过程中，优先级最高的值，比如1.2em
-
defaulting
当层叠值为空的时候，使用继承或初始值
得到指定值，Specified Value，经过cascading和defaulting之后，保证指定值一定不为空
-
resolving
将一些相对值或者关键字转化成绝对值，比如em转为px，相对路径转为绝对路径
得到计算值，Computed Value，一般来说是，浏览器在不进行实际布局的情况下，所能得到的最具体的值。比如60%
-
formatting
将计算值进一步转化，比如关键字、百分比等都转为绝对值
得到使用值，Used Value，进行实际布局时使用的值，不会再有相对值或关键字。比如400.2px
-
constraining
将小数像素值转为整数
得到实际值，渲染时实际生效的值，比如400px
布局Layout
布局简介
确定内容的大小和位置的算法
依据元素、容器、兄弟节点和内容等信息来计算
布局相关技术
- 常规流（行级、块级、表格布局、FlexBox、Grid布局）
- 浮动
- 绝对定位
盒模型
一个盒子尺寸包括margin、border、padding、content
box-sizing: content box
width
- 指定content box宽度
- 百分数相对于容器的content box宽度
height
- 指定content box高度
- 百分数相对于容器的content box高度，容器有指定的高度时，百分数才生效
padding
- 内边距，百分数相对于容器的宽度
border
- 边框，可利用边框制作三角形等图形
margin
- 外边距，百分数相对于容器的宽度
- margin在垂直方向上存在margin collapse，边距重叠，会取两个外边距的最大值
box-sizing: border-box
- width、height包含border、padding、content
overflow
对于超出盒子大小的内容，可通过overflow的属性值来指定其显示情况
- vidible 可见
- hidden 隐藏
- scroll 滚动条
