那条CSS会生效：
具体那条CSS（对同一的属性）会生效 ==> 取决于其的特异度即优先级
选择器的特异度：
- id ==> 例如 ：
#nav- 伪类 ==> 例如：
.hd- 标签 ==> 例如：
a:link一个例子：
- #nav .list li a:link ==> 1 2 2
- .hd ul.links a ==> 0 2 2
同一属性的选择器的特异度（优先级）越高 ==> 越优先生效 同一属性的选择器特异度低的会被特异度高的覆盖掉
继承：
子选择器会自动拥有父选择器的全部属性
除非再在子选择器中显示的指定一个值
但是，有一些是不能继承的（例如，box-sizing） ==> 可以使用显示继承
*{ box-sizing: inherit; } html { box-sizing: border-box; } .some-widget{ box-sizing: content-box: }初始值：
- CSS中，每个属性都有一一个初始值
- background-color的初始值为transparent
- margin-left的初始值为0
- 可以使用initial 关键字显式重置为初始值
- background-color: initial
CSS求值过程：
样式规则+DOM树 ==> filtering ==> 声明值 ==> cascading ==> 层叠值 ==> defaulting ==> 指定值 ==> resolving==> 计算值 ==> formatting ==> 使用值 ==> constrainting 实际值
- filtering ：对应用到该页面的规则用以下条件进行筛选:选择器匹配、属性有效、符合当前media等
- 声明值：Declared Values,一个元素的某属性可能有0到多个声明值。比如:p { font-size:16px }和p.text { font size:1.2em }
- cascading：按照来源、limportant、 选择器特异性、书写顺序等选出优先级最高的个属性值
- 层叠值：Cascaded Value,在层叠过程中，赢得优先级比赛的那个值。比如1 .2em
- defaulting：当层叠值为空的时候继承或初始值
- 指定值：Specified Value,经过cascading和defaulting之后，保证指定值一定不为空
- resolving：将一些相对值或者关键字转化成绝对值，比如em转为px,相对路径转为绝对路径
- 计算值：Computed Value, 一般来计算值-般来说是，浏览器会在不进行实说是，浏览器会在不进行实际布局的情况下，所能得到际布局的情况下，所能得到的最具体的值。比如60%的最具体的值.比如60%
- formatting：将计算值进一步转换， 比如关键字、百分比等都转为绝对值
- 使用值：Used Value,进行实际布局时使用的值，不会再有相对值或关键字。比如400.2px
- constrainting：将小数像素值转为整数
- 实际值：渲染时实际生效的值，比如400px
布局：
- 确定内容的大小和位置的算法
- 依据元素、容器、兄弟节点租
- 内容等信息来计算
三种布局的技术：
常规流
- 行级
- 块级
- 表格布局
- FlexBox
- Grid布局
浮动
绝对定位
块级 VS 行级：
- 块级 ==> 不和其它盒子并列摆放适用所有的盒模型属性
- 行级 ==> 和其它行级盒子一起放在一行或拆开成多行盒模型中的width、height不适用
常规流Normal Flow：
- 根元素、浮动和绝对定位的元素会脱离常规流
- 其它元素都在常规流之内(in-flow)
- 常规流中的盒子，在某种排版上下文中参与布局
行级排版上下文：
●Inline Formatting Context (IFC)
只包含行级盒子的容器会创建一个IFC
IFC内的排版规则：
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align决定-行内盒子的水平对齐
- vertical-align 决定一个 盒子在行内的垂直对齐
- 避开浮动(float)元素*
块级排版上下文：
Block Formatting Context (BFC)
某些容器会创建一个BFC根元素
- 浮动、绝对定位、inline-block
- Flex子项和Grid子项
- overflow值不是visible 的块盒
- display: flow-root;
BFC内排版规则：
- 盒子从上到下摆放
- 垂直margin合并
- BFC内盒子的margin不会与外面的合并
- BFC不会和浮动元素重叠
Flex Box：
一种新的排版上下文
它可以控制子级盒子的:
- 摆放的流向(→←↑↓)
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行
position属性：
static：默认值，非定位元素
relative：相对自身原本位置偏移，不脱离文档流
- 在常规流里面布局
- 相对于自己本应该在的位置进行偏移
- 流内其它元素当它没有偏移-样布局
- 使用top、left、 bottom、 right 设置偏移长度
absolute ：绝对定位，相对非static祖先元素定位
- 脱离常规流
- 相对于最近的非static祖先定位
- 不会对流内元素布局造成影响
fixed：相对于视口绝对定位
