概念
选择器的特异度：高优先级属性的值会覆盖掉低优先度的值
继承：某些属性会自动继承其父类元素的计算值，除非显示指定一个值
显式继承：把不可继承的属性变成可继承的属性
Eg:
*{
Box-sizing:inherit
}
初始值
Css中，每个属性都有初始值:
background-color初始值为transport
Margin-left初始值为0
可以使用initial关键字显示重置为初始值:
Background-color:initial
计算值
Computed Value,一般来说是，浏览器会在不进行实际布局的情况下，所能得到的最具体的值
布局(Layout)是什么？
确定内容的大小和位置的算法
依据元素，容器，兄弟节点和内容等信息来计算
布局相关技术：
常规流：行级，块级，表格布局，FlexBox，Grid布局
浮动，绝对定位
Css中将每一个元素都当作一个盒子来处理
Width:
指定content box宽度
取值为长度，百分数，auto
Auto由浏览器根据其他属性确定
百分数相对于容器的content box宽度
Length：
指定content box高度
取值为长度，百分数，auto
Auto由浏览器根据其他属性确定
百分数相对于容器的content box高度
容器具有指定的高度时，百分数才生效
Padding
指定元素四个方向的内边距
百分数相当于容器的宽度
Border
指定容器边框的样式，粗细和颜色
Margin（外边距）
指定元素四个方向
取值为长度，百分数，auto
百分数相对于容器的宽度
Eg:
Margin:auto水平居中
Margin collapse边距的合并（只发生在垂直方向）
box-sizing:border-box 使得块包含边框，在设置宽度时使用
overflow
Visible:显示超出部分
Hidden：溢出的内容隐藏
Scroll: 隐藏增加滚动条
Auto：必要的时候出滚动条
块级：不和其他盒子并排摆放，适合所有盒模型属性
行级：和其他多级盒子一起放在一行或拆开成多行,盒模型中width，height不适用
块级元素:生成块级盒子
行级元素：生成行级元素，内容分散在多个行盒中
display属性
Black：块级盒子
Inline：行级盒子
Inline-block：本身是行级，可以放在行盒中；可设置宽高，作为一个整体不会被拆散成多行
None：排版时被忽略
常规流Normal Flow
根元素，浮动和绝对定位的元素会脱离常规流
其他元素都在常规流内（in-flow）
常规流中的盒子，在某种排版上下文中参与布局
行级排版上下文
Inline Formatting Context
只包含行级盒子的容器会创建一个IFC
IFC内的排版规则
盒子在一行内水平摆放
一行放不下，换行显示
text-align决定一行内盒子水平对齐
vertical-align决定一个盒子在行内的垂直对齐
避开浮动元素*
块级排版上下文
Block formatting context
某些容器会创建一个BFC：
根元素
浮动，绝对定位，liline-block
Flex子项和Grid子项
Overflow值不是visible的块盒
Display：flow-root；
Bfc内的排版规则：
盒子从上到下摆放
垂直margin合并
BFC内盒子的margin不会与外面的合并
BFC不会和浮动元素重叠
Flex Box是什么？
一种新的排版上下文
可以控制盒子的：
摆放的流向
摆放顺序
盒子的宽度高度
水平和垂直方向的对齐
是否允许折行
Flexibility
可以设置子项的弹性：当容器由剩余空间时，会伸展，容器空间不够，会收缩
flex-grow 有剩余空间时的伸展能力
flex-shrink 容器空间不足时收缩能力
flex-basis 没有伸展或收缩时的基础长度
Grid布局
引入：display：grid使元素生成一个块级的Grid容器
使用grid-template相关属性将容器划分为网络
设置每一个子项占哪些行，列
Grid-template-columns:设置列
Grid-template-rows：设置行
Float：做图文缠绕
Position属性
Static 默认值，非定位元素
Relative 相对于自身原本位置偏移，不脱离文档流
在常规流里面布局
相对于自己本应该在的位置进行偏移
使用top,left,bottom,right设置偏移长度
流内其他元素不受他影响
Absolute 绝对定位，相对非static祖先元素定位
脱离常规流
相对于最近的的非static祖先定位
不对流内元素布局造成影响
Fixed 相对于视口绝对定位
