CSS标准(2)-盒模型


框结构

浏览器会根据渲染模型为每个元素生成四个嵌套的矩形框, 分别称作 content box、padding box、border box 和 margin box,它们是不可分割的,并可能会重合, 这就是 CSS 规范中描述的“盒模型”(box model)。

图中的大框,代表一个元素生成的矩形区域( box ),每一个 box 都包括一个 content 区域(元素的内容,如文本,图形等)以及环绕其四周的 padding (元素的内边距,填充部分)、border (元素的边框) 和 margin (元素的外边距) 区域。
示例:

其盒模型分解如下图:

外边距折叠

1.两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠

2.浮动元素/inline-block的元素/绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠

3.创建了块级格式化上下文的元素,不和它的子元素发生margin折叠

4.元素自身的margin-bottom和margin-top相邻时也会折叠

(完)