css 选择器的特异度
在css中，遇到对同一标签的某一属性的多次赋值时，会通过特异度来进行选择。
特异度越大，优先级越高。
继承
某些属性自动继承其父级元素的计算值，除非显示指定一个值。 显示继承 某些属性不能继承自父级元素，可以通过显示继承来实现对父级元素的继承。 显示继承的语法为*{}。
当一个元素没有设置属性，且其父类也没有设置属性，系统会自动调用初始值，初始值的关键字为initial。
布局 确定内容大小和位置的算法 依据元素，容器，兄弟节点和内容等信息来计算
布局相关技术
1.常规流（文档流）
布局方式： 行级 块级 表格布局 FlexBox Grid布局
盒模型
常用属性
height
指定content box高度
取值为长度、百分数、auto
auto取值由内容计算得来
百分数相对于容器的content box高度
容器有指定的高度时，百分数才生效
padding(内边距)
指定元素四个方向的内边距 百分数相对于容器宽度
border
指定边框的样式(style)，粗细(width)和颜色(color) 三个属性和四个方向
margin(外边距)
指定元素四个方向的外边距
取值可以是长度、百分数、auto
百分数相对于容器宽度
*使用margin：auto水平居中
*margin collapse
当两个margin冲突时，会自动选择较大的margin，不会重叠两个margin
box-sizing：border-box
系默认为contect-box，在实际使用时，border-box
over-flow
控制溢出内容展示
visible：无视broder直接显示
hidden：隐藏溢出部分
scroll：在border中滚动
auto：根据内容是否溢出自动切换
块级和行级
Block Level Box
不与其他盒子并排摆放
适用所有的盒模型属性
块级元素
生成块级盒子
body、article、 div、 main、 section、h1-6、 p、ul、li等
display: block
Inline Level Box
和其他行级盒子一起放在一行或拆成多行
盒模型的width,height不适用
行级元素
生成行级盒子
内容分散在多个行盒(line box)中
span、em、strong、 cite、 code等
display: inline
display
block 块级盒子
inline 行级盒子
inline-block 本身是行级，可以放在行盒中;可以设置宽
高;作为一个整体不会被拆散成多行
none 排版时完全被忽略
2.浮动
Flex Box是什么?
一种新的排版上下文
它可以控制子级盒子的:
摆放的流向(→←↑↓)
摆放顺序
盒子宽度和高度
水平和垂直方向的对齐
是否允许折行
Flex Box 的主轴和侧轴
justify-content 主轴布局
align-items 侧轴布局
Flexibility 弹性设置 例如：flex-grow
flex缩写
Grid布局（二位布局）
划分网格
grid line 网格线
float 浮动
3.绝对定位
position属性
static
默认值，非定位元素
relative
相对自身原本位置偏移，不脱离文档流
absolute
绝对定位，相对非static 祖先元素定位
fixed
相对于视口绝对定位
标题：深入CSS （上） - 掘金
