一、两种常见的布局规则的比较

块级 vs行级（CSS）

块级：Block Level Box
行级：Inline Level Box

块级：不和其它盒子并列摆放
行级：和其它行级盒子一起放在一行或拆开成多行。

块级:适用所有的盒模型属性
行级：盒模型中的width、height不适用

块级元素vs行级元素（HTML）

块级元素：生成块级盒子
行级元素：生成行级盒子；内容分散在多个行盒 (line box)中

块级元素：body、article、div、main、section、h1-6、p、ul、li等
行级元素：span、 em、 strong、cite、code 等

块级元素：display: block
行级元素：display: inline

display 属性

block:块级盒子
inline:行级盒子
inline-block:本身是行级，可以放在行盒中；可以设置宽高；作约一个整体不会被拆散成多行
none:排版时完全被忽略

二、常规流 Normal Flow（各排版规则的介绍）

•根元素、浮动和绝对定位的元素会脱离常规流
•其它元素都在常规流之内 (in-flow)
•常规流中的盒子，在某种排版上下文中参与布局

包括行级排版上下文、块级排版上下文、Table 排版上下文、Flex 排版上下文、Grial 排版上下文

行级排版上下文

• Inline Formatting Context (IFC)
•只包含行级盒子的容器会创建一个IFC
•IFC内的排版规则：
盒子在一行内水平摆放
一行放不下时，换行显示
textalign 决定一行内盒子的水平对齐
avertical-align 决定一个盒子在行内的垂直对齐
避开浮动(float)元素*

块级排版上下文

•Block Formatting Context (BFC)
•某些容器会创建一个BFC
•根元素
•浮动、绝对定位、inline-block

• Flex子项和Grid子项
•overtlow 值不是 visible 的块盒
• display: flow-root;

BFC内的排版规则

•盒子从上到下摆放
•垂直 margin 合井
•BFC 内盒子的margin 不会与外面的合并
•BFC 不会和浮动元素重叠

Flex Box

•一种新的排版上下文
•它可以控制子级盒子的：
摆放的流向（向左→、向右、向上、向下）
摆放顺序
盒子宽度和高度
水平和垂直方向的对齐
是否允许折行

Flexibility

•可以设置子项的弹性：当容器有剩余空间时，会伸展：容器空间不够时，会收缩
•tlex-grow 有剩余空间时的伸展能力
•flex-shrink 容器空间不足时收缩的能力
•flex-basis 没有伸展或收缩时的基础长度

flex-glow

FLEX

flex: 1 flex-grow: 1
flex: 100px flex-basis: 100px
flex: 2 1 flex-grow: 2; flex-shrink: 1
flex: 1 100px flex-grow: 1; flex-basis: 100px
flex: 2 0 100px flex-grow: 2; flex-shrink: 0; flex-basis: 100px
flex: auto flex: 1 1 auto
flex: none flex: 0 0 auto

对比

display: grid

•display:grid 使元素生成一个块级的 Grid 容器
•使用 grid-template 相关属性将容器划分为网格
•设置每一个子项占哪些行/列

上图为display:grid的图示。

划分网格

position 属性

static 默认值，非定位元素
relative 相对自身原本位置偏移，不脱离文档流
absolute 绝对定位，相对非static 祖先元素定位
fixed 相对于视口绝对定位

position: relative

•在常规流里面布局
•相对于自己本应该在的位置进行偏移
•使用 top、left、bottom、right 设置偏移长度
•流内其它元素当它没有偏移一样布局

position: absolute

•脱离常规流
•相对于最近的非 static 祖先定位
•不会对流内元素布局造成影响

三、学习 CSS 的几点建议

•充分利用MDN和 W3C CSS 规范
•保持好奇心，善用浏览器的开发者工具
•持续学习，CSS 新特性还在不断出现

深入CSS （下）| 青训营