深刻CSS基础之box model

阅读注意事项

1. 本篇文章的依赖主要是CSS2.1 specification 8. box model 和 CSS Box Model Module Level 3。
2. 本篇总体比较细节和理论，可能会看起来枯燥，我尽可能讲的逻辑简单些。我的认为有时候阅读枯燥的理论文章是有必要的。
3. 写这篇的文章主要目的在于完善本身的知识体系。所以但愿你们可以多多指出文章中不恰当之地方。
4. 永久博文地址

introduction

box model应该是CSS当中最核心的概念之一了，本篇主要讲述CSS当中的box model(盒模型)。

在看本篇内容以前，能够先本身回答下面几个问题：

1. 什么是box model？ box model 包含了哪些内容？ 它的做用是什么？ 它出如今浏览器处理文档的哪个步骤？ 后续步骤是什么？
2. collapse margin的细节是什么？

什么是box model(盒模型)

CSS2.1 specification 8.box model 第一句话就很好的描述了它的定义：

The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model.

从这句话中咱们能够得出来box model是什么： box model是用来描述DOM树中元素生成的矩形盒子的，而且UAs会根据 visual formatting model 来布局这些盒子。

box dimension(盒尺寸)

这一小节是用来描述具体的矩形盒子的，每一个盒子会有4块区域：

• content area
• padding area
• border area
• margin area 每块区域的尺寸由各自相关的属性决定。另外 padding, border, margin 能够被分割成top, bottom, left, right 四个小区域，并由具体的属性来定义。

下面咱们来引入新的名词(为了后面的内容)，edge: 每一个盒子的周长被称为edge，即边界。相应的，咱们能够知道每一个box都会有四个edge.

• content edge or inner edge: content area 的尺寸默认由元素的width 和 height 两个属性，元素的内容以及它的containing block决定
• padding edge： padding edge定义了元素的padding box（包含content 和 padding area）
• border edge: border edge定义了元素的border box（包含content，padding 和 border area）
• margin edge or outer edge:若是 margin的width为0，那么margin area和padding area 同样

Note： 一个box的content area， padding area 和 border area的 background样式由该元素的 background属性决定。也就是说background 默认会一直延伸到 border area，而 margin老是透明的。在CSS3中，咱们可使用background新属性来修改默认状况。

CSS Box model 3 新增长一段： When a box fragments—is broken, as across lines or across pages, into separate box fragments—each of its boxes (content box, padding box, border box, margin box) also fragments. How the content/padding/border/margin areas react to fragmentation is specified in [css-break-3] and controlled by the box-decoration-break property.

这一段主要讲的是当一个盒子跨行或者跨页时会被分割成多个box片断，那么对于该盒子的content，padding，border，margin在不一样的box 片断中该如何表现？这些内容定义在css-break-3中，而且可使用box-decoration-break来控制。 另外其实在CSS2.1也有描述这样的场景，在8.6中描述了inline box跨行时盒模型该如何表现。

margin属性: margin-top, margin-bottom, margin-left, margin-right 和 margin

这些属性都是初学时就已经用的很熟的。所以，这里只强调几个注意事项： 先看属性的定义

'margin-top', 'margin-bottom', 'margin-left', 'margin-right'
Value:  	`<margin-width>` | inherit
Initial:  	0
Applies to:  	all elements except elements with table display types other than table-caption, table and inline-table
Inherited:  	no
Percentages:  	refer to width of containing block
Media:  	visual
Computed value:  	the percentage as specified or the absolute length
复制代码

1. value能够是 <margin-width> ，包含3种具体的取值：
   • <length>: 指定固定的宽度，好比3px, 1em等
   • <percentage>: 百分比取值在由computed value转换成used value的时候计算，基数是generated box's containing block的width(也就是该元素的包含块的width). 而若是containing block的width会依赖该元素，那么具体表如今CSS 2.1中未定义的。
   • auto， 后面具体讲
2. margin-top 和 margin-bottom 对于 non-replaced inline elements不起做用。
3. 在CSS3当中，上面这几个属性被称为physical margin属性。而且介绍了相对应的logical margin属性,好比margin-block-start,margin-block-end(这些属性跟文档的writing mode相关)。（logical margin和physical margin控制的是一样的margin区域，只是不一样的表现形式而已。CSS3加入这个特性是由于不一样国家的文档排列形式是不同的，好比阿拉伯语就是从右往左写的）

Note: CSS3中添加的margin-trim属性因为目前没有任何浏览器支持，这里不作介绍(当前时间为2019年2月)。

collapsing margins

在CSS当中，2个或多个盒子相邻的垂直方向margins会合并成一个margin，这种合并被咱们称为collapse（塌陷），而合并后的margin被叫作collapse margin. 首先，咱们先强调一些margin不会合并的例外状况：

1. 水平方向上的margin不会collapse
2. 对于相邻的垂直方向上的margin不会塌陷有两种状况：
   • root元素盒子的 margin不会产生塌陷(在HTML当中就是 html元素)
   • 若是一个带有clearance(间隙，指的是clear属性致使元素位置移动产生的间隙)的元素的top margin和 bottom margin 存在相邻的margin，该元素的相关margin会和紧挨着的兄弟元素的相邻外边距合并，但合并后的外边距不会再和父级块的下外边距合并

那么，如何判断两个盒子的margin是相邻的(adjoining)呢? 须要同时知足下面那几个条件：

• 两个盒子都属于in-flow(流内) block-level boxes，而且处于同一个block formatting model。
• 没有 line box, clearance, padding, border将它们间隔开（这里高度为0的line box 会被忽略)。
• 都属于垂直相邻的盒边界，也就是知足下面的其中一种状况：
  • 盒子的上外边距和其第一个 in-flow 孩子节点的上外边距
  • 盒子的下外边距与其下一个紧挨着的in-flow中的兄弟节点的上外边距
  • 盒子的下外边距（而且该盒子的height computed value为auto）与其最后一个in-flow孩子节点的下外边距
  • 盒子的上外边距和下外边距，知足条件是：该盒子没有创建新的block formatting model，min-height为0，height的computed value为0或者auto，没有in-flow 孩子节点。

另外须要注意的是折叠外边距也可以与另外一个外边距相邻，只须要其外边距的任意一部分与另外一个外边距相邻就算。

Note：由上面的collapse margin 的定义咱们能够得出如下的推论：

• 相邻外边距能够由不具有兄弟或祖先关系的元素之间生成
• floated box的margin和任何其余盒子的margin都不会合并（包括它流内的孩子节点）- 由于 float box不是流内的。
• 绝对定位的盒子的margin和任何其余盒子的margin都不会合并（包括它流内的孩子节点） - 一样是由于绝对定位的盒子是流外的。
• 创建新的block formatting context的元素的margin不会与它的流内孩子节点的margin合并（好比floated box）
• inline-block盒子的margin不会与其余盒子的margin合并（包括它的流内孩子节点）- 建立了新的block formatting model而且不是block-level box.
• in-flow block-level box的下外边距会与相邻的in-flow block-level兄弟节点的上外边距合并，除非该兄弟节点存在clearance
• in-flow block element的上外边距会与它的第一个流内孩子节点（该孩子节点是block-level盒子）的上外边距合并，这里须要该元素不存在top border，不存在top padding，而且孩子节点也没有clearance
• 一个height为auto而且min-height为0的in-flow block-level box的bottom margin会与它的最后一个流内block-level的孩子节点的bottom margin合并，条件是该盒子没有bottom padding，bottom border而且其孩子节点的bottom margin没有与具备clearance的top margin合并
• 盒子自身的外边距也会合并，条件是min-height为0, 既没有上下边框，也没有上下内边距，height为0或者auto，且不包含line box（而且全部流内孩子的外边距都会合并）

那么合并后的margin该如何取值呢？

• 当两个或者更多的margin合并时，collapsed margin的宽度为被合并的全部外边距中的最大值
• 若是存在负margin，那么就从正相邻margin中的最大值减去负相邻margin中绝对值最大的值
• 若是没有正margin，就用0减去相邻margin中绝对值最大的值

下面咱们讨论最后一种特殊状况： 若是一个盒子的上下外边距相邻，那么有可能外边距合并会穿透该盒子。在这种状况下，该元素的位置取决于合并margin的其余元素之间的关系：

• 若是该元素的margins和它父元素的top margin合并，那么该盒子的top border edge和它父元素的top border edge同样
• 不然的话，要么该元素的父元素没有参与margin collapse，要么只有该父元素的bottom margin参与。那么该元素的上边框edge和该元素bottom border非0时相同。

须要注意的是，被折叠外边距穿过的元素的位置不影响其余外边距正要被合并的元素的位置，其上边框边界的位置仅仅是用于布局这些元素的后代元素。

padding属性： padding-top, padding-right, padding-bottom, padding-left 和 padding

padding属性定义了盒子的内边距区域的宽度。

'padding-top', 'padding-right', 'padding-bottom', 'padding-left'
Value:  	`<padding-width>` | inherit
Initial:  	0
Applies to:  	除table-row-group，table-header-group，table-footer-group，table-row，table-column-group和table-column外的全部元素
Inherited:  	no
Percentages:  	参照包含块的宽度
Media:  	visual
Computed value:  	指定的百分比或者绝对长度
复制代码

padding属性和margin属性主要由下面几个不一样：

1. padding的取值没有auto
2. padding值不能够为负
3. 适用的元素范围不同

和margin同样的是，百分比的基数是generated box's containing block的width(也就是该元素的包含块的width).

note：这里的padding-top等4个属性仍然是physical 属性。在CSS3当中添加了logical padding - padding-block-start等。

border属性

'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'
Value:  	`<border-width>` | inherit
Initial:  	medium
Applies to:  	全部元素
Inherited:  	no
Percentages:  	N/A
Media:  	visual
Computed value:  	绝对长度，或者'0'，若是border style为'none'或者'hidden'的话
复制代码

对于border-width须要注意：

1. <border-width>只有关键字和<length>这两种选择，关键字是thin, medium, thick，大小依次变大，具体大小由用户代理决定
2. 边框宽度不能为负

'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color'
Value:  	`<color>` | transparent | inherit
Initial:  	'color'属性的值
Applies to:  	全部元素
Inherited:  	no
Percentages:  	N/A
Media:  	visual
Computed value:  	从'color'属性取值的话，取'color'的计算值，不然，就按指定值
复制代码

这里须要注意的是： border-color 的初始值是 color 属性的值，咱们有些时候能够利用这个特性来实现一些特殊的要求。

双向环境(bidirectional context)中inline-level 元素的盒模型

对于每个line box， UAs必须为每个元素产生的inline box渲染margin，border，padding以visual order的方式（而非logical order） 主要分为两种状况：

• direction: ltr : 元素出现的第一个line box的最左端生成的盒子具备左外边距，左边框，左内边距，而且元素出现的最后一个line box最右端生成的盒子具备右内边距，有边框，右外边距
• direction: rtl：元素出现的第一个line box的最右端生成的盒子具备右内边距，有边框，右外边距，而且元素出现的最后一个line box的最左端生成的盒子具备左外边距，左边框，左内边距

reference

1. CSS Box Model Module Level 3
2. CSS2.1 box model
3. CSS Display Module Level 3
4. CSS Flexible Box Layout Module Level 1