CSS盒模型

[diveDylan]

盒子Box

在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，常用的盒子模式有两种Block box，Inline box, Flex box, Grid box。 我们常用的宏观box模型（外部显示盒子类型）：Block box, Inline box`。 Block box特点：

1. 会占用该盒子方向的所有可用空间
2. 每个盒子都会换行
3. width和height作用与盒子content
4. padding, margin, border会作用与content的size、layout

Inline box特点：

1. 盒子不会换行布局
2. width和height不作用与盒子content
3. padding, margin, border垂直方向的设置不作用于content 的 size、layout
4. padding, margin, border水平方向的设置会作用于content 的 size、layout

内显示盒子类型：Flex box, Grid box

盒模型

盒模型组成：

1. content box内容盒子，显示内容主体，通过width和height控制大小
2. padding box内容区域+内容外层的空白区域，通过属性padding控制大小
3. border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置
4. margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。

标准盒模型： 盒子的大小由盒子的width ,height, padding, border相加得到

IE盒模型 ：