深入理解CSS

选择器的优先级---特异度（Specificity）

继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值。

显示继承

使用inherit关键字

初始值

CSS中，每个属性都有一个初始值

background-color的初始值为transparent

margin-left的初始值为0

可以使用initi关键字显示重置为初始值

background-color：initial

布局

三种布局方式：

常规流

行级 块级 表格布局 FlexBox Grid布局

浮动

绝对定位

盒模型

盒模型的内边距（padding）

百分数相对于容器宽度

边框（border）

外边距（margin）

块级 vs 行级

块级适用所有盒模型属性，不和其他盒子并列摆放

行级和其他行级盒子一起放在一行或拆开成多行，盒模型中的width和height不适用

display属性

block：块级盒子

inline：行级盒子

inline-block：本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行

none：排版时完全被忽略

行级排版上下文

块级排版上下文

BFC内的排版规则

Flex Box

一种新的排版方式

可以控制子级盒子的：

摆放的流向

摆放顺序

盒子宽度和高度

水平和垂直方向的对齐

是否允许折行

主轴：justify-content

侧轴：align-items

Flexibility

可以设置子项的弹性；当容器有剩余空间时，会伸展；容器控件不够时，会收缩

flex-grow 有剩余空间时的伸展能力

flex-shrink 容器空间不足时收缩的能力

flex-basis 没有伸展或收缩时的基础长度

flex

Grid布局

display:grid使元素生成一个块级的Grid容器

使用grid-template相关属性将容器划分为网格

设置每一个子项占哪些行/列

grid line网格线

例如：

grid-row-start:1;

grid-column-start:1;

grid-row-end:3;

grid-column-end:3;

或者:

grid-area:1/1/3/3;

float浮动

position

static：默认值，非定位元素

relative：相对自身原本位置偏移。不脱离文档流

absolute：绝对定位，相对非static祖先元素定位

fixed：相对于视口绝对定位