这是我参与「第四届青训营 」笔记创作活动的第3天
继承
某些属性会自动继承其父元素的计算值，除非显式指定一个值
显式继承
* { box- sizing: inherit; } html { box-sizing: border-box;} Bome- widget { box-sizing: content- box; }
初始值
- CSS中，每个属性都有一个初始值
-
- background-color的初始值为transparent
-
- margin-left的初始值为О
- 可以使用initial关键字显式重置为初始值
-
- background-color: initial
CSS求值过程
- filtering:对应用到该页面的规则用以下条件进行筛选:选择器匹配、属性有效、符合当前media等
- 声明值：Declared Values,一个元素的某属性可能有0到多个声明值。比如:p i 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
布局
- 确定内容的大小和位置的算法
- 依据元素、容器、兄弟节点和内容等信息来计算
相关技术
- 常规流：行级、块级、表格布局、FlexBox、Grid布局
- 浮动
- 绝对定位
width
- 指定content box宽度
- 取值为长度、百分数、auto
- auto由浏览器根据其它属性确定
- 百分数相对于容器的content box宽度
height
- 指定content box高度
- 取值为长度、百分数、autoauto取值由内容计算得来
- 百分数相对于容器的 content box高度
- 容器有指定的高度时，百分数才生效
