color可以继承，和文字相关属性可以继承，与盒模型相关属性不能继承 显式继承：inherit
css中，每个属性都有一个初始。可以使用initial关键字显式重置为初始值
浏览器拿到html后进行解析，成DOM树，解析的过程中也搜集样式规则。然后总体进行筛选，找到声明值（0-多），筛选优先级最高的一个属性值，为层叠值。层叠值为空，使用继承或者初始值，保证指定值不为空。将一些相对值或者关键字转化为绝对值（比如em转化为px，相对路径转化为绝对路径）得到计算值。将计算值进一步转换得到使用值。 constraininng得到实际值
盒模型：构成：内容区（width,height），内边距(padding)，边框(border)，外边距(margin)
margin collapse：上一个元素margin-buttom和下一个元素margin-top取最大的为两元素间margin
box-sizing:border-box;总宽度=width总高度=height
行级inline：不会独占整行，设置宽高无效 span\em\strong\cite\code... 块级block：独占整行，设置宽高有效 body\article\div\main\section\h1-6\p\ul\li... inline-block本身是行级，可以放在行盒中；可以设置宽高作为一个整体不会拆散成多行 none 排版时完全被忽略
IFC：只包含行级盒子的容器会创建一个IFC IFC内排版规则：
- 盒子在行内水平摆放
- 一行放不下时，换行显示
- text-align 决定一行内盒子的水平对齐
- vertical-align 决定一个盒子在行内的垂直对齐
- 避开浮动元素
BFC：某些元素会创建一个BFC：
- 根元素
- 浮动、绝对定位、inline-block
- flex子项和grid子项
- overflow值不是visible的块盒
- display:flow-root;
BFC内的排版规则
- 盒子从上到下摆放
- 垂直margin合并
- BFC内盒子的margin不会与外面的合并
- BFC不会和浮动元素重叠
Flex Box（用的最多） 可以控制子集盒子的摆动流向，摆放顺序，盒子宽高，水平垂直对齐，是否允许折行
justify-content控制水平浮动的布局 align-items：垂直的浮动的布局
flexibility可以设置子项的弹性，当容器有剩余空间时，会伸展；容器空间不够时，会收缩。
- flex-grow有剩余空间的伸展能力
- flex-shrink容器空间不足时收缩的能力
- flex-basis没有伸展或收缩时的基础长度
flex box布局单一，grid二维布局，gride area网格区域，float浮动实现文字环绕
position属性
- static 默认值，非定位元素
- relative 相对自身原本位置偏移，不脱离文档流
- absolute 绝对定位，相对于非static祖先元素定位
- fixed 相对于视口绝对定位
