CSS布局

CSS中布局的常用方式有三种：文档流、浮动和绝对定位。

盒模型

盒子模型都是由content + padding + border + margin组成。

盒模型一共有两种，分别为content-box 和 border-box，两者的区别在于，他们的width和height的计算方式不同，盒模型的转换可以使用box-sizing属性进行转换。

• box-sizing: content-box
• box-sizing: border-box

元素与盒子

每个HTML元素都被视为一种盒子，盒子分为行级盒子和块级盒子，两者的区别：

块级盒子	行级盒子
单独占一行，不能与其他盒子并列一行	可以与其他盒子放在一行或分开放在多行
适用所有的盒模型属性	盒模型中的width、height不适用

盒子与元素的区别与联系： 行级盒子、块级盒子是CSS中的概念，行级元素和块级元素是HTML中的概念。

块级元素	行级元素
生成块级盒子	生成行级盒子
示例：body、div、h1、p、ul、li等	示例：span、em、strong、cite等
可以设置display属性改变盒子属性，其中inline-block为行级盒子，但可以设置宽高属性。

布局

常规流

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

行级排版上下文 - IFC

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

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

块级排版上下文 - BFC

Block Formatting Context (BFC) 某些容器会创建一个BFC

• 根元素
• 浮动、绝对定位、inline-block
• Flex子项和Grid子项
• overflow 值不是 visible 的块盒
• display: flow-root;

BFC 内的排版规则

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

Flex 布局

使用flex布局：display: flex;，flex布局可以控制子级盒子的：

• 摆放的流向 (↑ ↓ → ←)
• 摆放顺序
• 盒子宽度和高度
• 水平和垂直方向的对齐
• 是否允许换行

flex布局的主轴与侧轴，项目默认沿主轴排列。 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

flex容器属性：

• flex-direction，设置主轴方向
• flex-wrap，设置换行策略
• flex-flow，是flex-direction和flex-wrap的简写形式
• justify-content，定义项目在主轴上的对齐方式
• align-items，定义项目在侧轴上如何对齐
• align-content，定义多根轴线的对齐方式

flex项目属性：

• order，定义项目的排列顺序，值越小越前
• flex-grow，定义项目的放大比例
• flex-shrink，定义项目的缩小比例
• flex-basis，定义项目原始大小
• align-self，设置当前项目单独的对齐方式

Grid布局

Grid布局可以看作是二维布局，学习链接：Grid布局。

采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。

Float

一般用于图文排版

绝对定位

为元素设置position属性来修改其定位方式：

• static - 默认值，非定位元素
• relative：在文档流中布局，相对于自己本来的位置进行偏移，使用top、left等进行偏移，不脱离文档流
• absolute：脱离文档流，相对于最近的非static祖先定位，不会对流内元素布局造成影响
• fixed：脱离文档流，位置总是相对于窗口固定
• sticky：粘性布局，可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位