CSS中的布局详解（一）：视觉格式化模型
一、盒模型
盒模型，顾名思义，是HTML文档中每个元素在渲染的时候都会被描述成一个矩形盒子，盒模型就是表示每个元素盒子所占空间大小的模型。
盒模型主要有四个部分：
- margin （外边距）
- border （边框）
- padding （内边距）
- content （内容区域）
一般来说，默认盒模型实际占用空间计算模式为：
- 水平空间大小 = margin（左右）+ border（左右）+ padding（左右）+ width
- 垂直空间大小 = margin（上下）+ border （上下）+ padding （上下）+height
因此， 一个元素的实际大小为：border + padding + width/height
在CSS中，名为box-sizing的属性可以改变元素宽高的计算方式。
box-sizing有两个常用的取值：
- content-box
- border-box
content-box为默认值，实际宽高为上述元素实际大小的计算方式。
border-box则是一个元素设置的width和height，不包含其他的。
二、视觉格式化模型
元素能够被渲染成一个又一个盒子，那么这些盒子的位置在页面中又是如何摆放的呢？
在默认情况下，盒子是按照元素在HTML中的先后位置从左至右从上至下一个接着一个排列放置。
但此时也分为两种情况，有的盒子呈水平排列，有的盒子却占满整个一行。这是因为不同的盒子，使用的是不同的格式化上下文来布局。
格式化上下文常见的有两种：
- 块格式化上下文（BFC）
- 行内格式化上下文（IFC）
当元素的display值为block、list-item、table、flex、grid时，它是块级元素，每个块级元素至少生成一个块级盒，块级盒参与BFC，被渲染成完整的一个新行。
W3C对于BFC的定义是：
浮动元素和绝对定位元素，非块极盒子的块级容器，以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的块级格式化上下文。
在一个块级格式化上下文里，盒子从包含块的顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin来决定的，两个相邻的块级盒子的垂直外边距会发生叠加。
在块级格式化上下文中，每一个盒子的左外边缘会触碰到容器的左边缘（对于从右到左的格式来说，则会触碰到右边缘），即使存在浮动也是如此，除非这个盒子创建一个新的块级格式化上下文。
总结一下BFC的特性：
- 内部的Box会在垂直方向，从顶部开始一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加。
- 每个元素的margin box的左边，与包含块border box的左边相接触，即使存在浮动也是如此。
- BFC的区域不会与float box叠加
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
- 计算BFC的高度时，浮动元素也参与计算。
当元素的display值为inline、inline-block、inline-table、inline-flex、inline-grid时，它是行内级元素，行内级元素生成行内级盒，参与IFC，被渲染为水平排列，直到当行被占满然后换行。
总结IFC的渲染规则：
- 盒子一个接一个地水平摆放，当容器宽度不够时就会换行。
- 在水平方向上，这些盒的外边距，边框，内边距所占用的空间都会被计算，但行内和的垂直border，padding，margin都会撑开行盒的高度。
- 在垂直方向上，这些盒可能会以不同形式来对齐，可通过vertical-align来设置，默认对齐为baseline
- 每一行将生成一个行盒，包括该行所有的盒子，行盒的宽度是由包含块和存在的浮动来决定
- 行盒一般左右边都贴近其包含块，但是会因为浮动和的存在而发生变化，浮动盒会位于包含块边缘与行盒边缘之间，这样行盒的可用宽度就小于包含块的宽度
- 当所有盒的总宽度小于行盒的宽度，那么行盒中的水平方向排版有text-align来决定
- 当所有盒的总宽度超过一个行盒时，就会形成多个行盒，多个行盒互相之间垂直方向不能分离，不能重叠
- 当一个行内盒超过行盒的宽度时，它会被分割成多个盒，这些盒被分布在多个行盒里，如果一个行内盒不能被分割，那么这个行内盒将溢出这个行盒
- 行盒的高度由内部元素中实际高度最高的元素计算出来，每个行盒的高度由于内容不一样，所以高度也可能不一样
- 在一个行盒中，当他包含的内部容器的高度小于行盒的高度的时候，内部容器的垂直位置可由自己的vertical-align属性来确定
- 在IFC中，是不能存在块级元素的，如果将块级元素放入IFC，那么会被破坏成BFC，而块级元素前的元素或文本和块级元素后的元素或文本将会各自自动产生一个匿名块盒将其包围。
三、一些易混淆的概念
块元素与块级元素
块级元素：块级元素是那些视觉上会被格式化成块状的元素，也就是会换新行的元素。
块元素：块元素是display属性值为block的元素，他应该是块级元素的一个子集。
行内元素与行内及元素
行内级元素：行内级元素是不会为自身内容形成新的块，而让内容分布在多行中的元素。
行内元素：行内元素仅仅是display值为inline的元素，是行内及元素的一个子集。
block，inline，inline-block
block和inline这里不再赘述，重点说一下inline-block：
inline-block是将元素呈现为inline，但元素的内容却又作为block呈现，既具有block的宽高特性，又具有inline的同行特性。
参考资料：
- 腾讯课堂前端NEXT课程文档——视觉格式化模型
CSS布局详解系列索引：
