这是我参与【第五届青训营】伴学笔记创作活动的第9天。

块级 vs 行级

块级 vs 行级

块级元素 vs 行级元素

display 属性

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

常规流 Normal Flow

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

行级排版上下文

• Inline Formatting Context (IFC)
• 只包含行级盒子的容器会创建一个IFC
• IFC 内的排版规则:

1. 盒子在一行内水平摆放
2. 一行放不下时，换行显示
3. text-align 决定一行内盒子的水平对齐
4. vertical-align 决定一个盒子在行内的垂直对齐。
5. 避开浮动(float)元素*

块级排版上下文

• Block Formatting Context (BFC)
• 某些容器会创建一个BFC
  例如：
  • 根元素
  • 浮动、绝对定位、inline-block
  • Flex子项和Grid子项
  • overflow 值不是 visible 的块盒
  • display: flow-root;

BFC 内的排版规则

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

Flex Box

• 一种新的排版上下文
• 它可以控制子级盒子的:
  • 摆放的流向 (→ ← ↑↓)
  • 摆放顺序
  • 盒子宽度和高度
  • 水平和垂直方向的对齐
  • 是否允许折行

flex-direction

主轴与侧轴

justify-content

align-items

align-self

order

Flexibility

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

flex

Grid 布局

display: grid

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

grid line 网格线

grid area 网格区

用1/1/3/3表示

float 浮动

position 属性

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

position: relative

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

position: absolute

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