这是我参加「第五届青训营 」伴学笔记创作活动的第5天
CSS求值过程
- 浏览器解析Html成为DOM树
- 将link,style样式规则整合在一起
- 将每个元素对应每一个CSS属性的值（遍历所有的元素）
首先进行fittering 规则筛选，选择器匹配，属性有效，符合media等等，然后的得到一组匹配好的值，Declared Values（声明值），一个元素可以有两个声明值，cascading（排序），进行来源，limportannt，特异性，等等选出优先级最高的属性值，Cascaded Value在层叠优先值比赛中赢的那个值，defaulting,当层叠值为空的时候，使用继承或初始值，Specified Value(指定值) 有且只有一个值得到保留，resolving，进行相对值和关键字的转化 Computed Value（计算值）经过计算之后得出的值，（像60%这种值不会进行转换）formatting,将计算值进一步转换，比如关键字，百分比等都转为绝对值,Used Value(使用值)，进行实际布局时用的值，不会有相对值和关键字， constraining，将小数值转为整数，最终决定作用，最终到达实际值
PS:
计算值：浏览器拿到css值之后，就可以转化出来的值
使用值：没法直接分析，必须经过渲染才进行可视
布局（Layout）
- 确定内容的大小和位置的算法
- 依据元素·容器·兄弟节点和内容等信息来计算
布局相关技术
常规流（normal flow,文档流）：
- 块级从上往下
- 行级像文字一样一行一行书写
- 表格布局
- FlexBox
- Gird布局
浮动
- 把一些元素设置成浮动效果
绝对定位
- 不会被常规流等进行影响
盒模型
- margin
- border
- padding
- width(content)
- height(content)
width:
- 指定content box宽度
- 取值为长度，百分数，auto
- auto由浏览器根据其他属性确定
- 百分数相对于容器的content box高度
