前端布局原理涉及到的相关概念总结

整体结构说明：

CSS basic box model（标准盒模型）
Visual formatting model （视觉格式化模型）
Viewport
containing block （包含块）
Normal flow
- Block formatting contexts（块格式化上下文）
- Inline formatting contexts（内联格式化上下文）

标准盒模型

上面这张图大家应该都很熟悉，我们知道在浏览器布局文档时，页面每一个元素会被当做一个个矩形的盒子对待，我们编写的css，决定这些盒子的大小、位置、以及各种属性（背景、颜色、等等等），这些盒子的特点如下：

1）拥有四个边界，分别是：content edge 、padding edge、border edge、margin edge
2）对应的，每一个盒子，划分4个区域：

content box：容纳子孙元素,对应上图中中心蓝色部分；
padding box：隔离自身与子孙，对应上图中的绿色部分；
border box：自身轮廓
margin box：隔离自身与相邻元素

这里说明一点：对于日常布局中使用的width属性来说，默认情况下width值设置的是content box 的宽度（但是早期ie版本的浏览器width值设定的是border box的宽度），这种计算方式对我们的布局元素来说会有一些不方便（如果涉及border、padding），所以这里提一个常用的属性：box-sizing，属性值与区域划分对应，分别为：content-box 、padding-box、border-box、margin-box。一般开发中最常用的选项为border-box，这里不多做说明。

视觉格式化模型

定义：

The CSS visual formatting model is an algorithm that processes a document and displays it on visual media. This model is a basic concept of CSS

所以，视觉格式化模型是什么？
是一个算法、一系列规则
那这个算法用来干嘛？
是用来描述用户代理（浏览器）如何为视觉媒体（屏幕）处理文档树。
而确定文档在屏幕上的显示，具体又涉及：
控制元素盒子的生成、定位体系、正常流、浮动、绝对定位、层级显示、文档方向等等，所以本文后面介绍的一些概念，都属于视觉格式化模型中的一部分。

下面简要说明一部分内容

在视觉格式化模型中，文档中的每一个元素会对应生成0个、1个、或多个遵从css 盒模型的盒子，每一个盒子布局由下列因素决定：

盒的尺寸和类型
定位体系 Positioning Scheme （常规流，浮动和绝对定位）
文档树中元素之间的关系
外部信息（如：视口大小，图片的固有尺寸等）

通俗来说，我们文档中的每一个元素，都被按照一个个盒子来对待，一个元素可能对应一个盒子，也可能对应多个盒子（例如列表项元素），这些盒子的特点符合css盒模型的定义，也就是说这些盒子都会有对应的内容区域、内边距区域、边框区域等等，这些盒子最终在屏幕上的显示，则取决于盒子各项默认或我们设定的属性值，像display、position、width、height等等。

盒子的生成：
从文档元素生成盒子，盒子区分不同的类型，对应不同的计算规则，取决于css display 属性。元素类型区分：

块级元素
行内元素
行内块级元素

盒子的定位：
生成盒子之后，css引擎需要定位每一个盒子完成布局，定位区分：

普通流：当css position 属性被设定为static或relative，并且 css float 值为none 盒子属于普通流定位，一个接着一个进行垂直or水平布局；
浮动：css float 属性值不为none，并且position 值为 static 或 relative ，盒子属性浮动定位。
绝对定位：如果元素的 position 为 absolute 或 fixed，该元素为绝对定位。绝对定位的元素相对于其包含块进行定位。

Viewport：

对于视口，这里给出w3c的定义：

User agents for continuous media generally offer users a viewport (a window or other viewing area on the screen) through which users consult a document. User agents may change the document's layout when the viewport is resized

个人理解：浏览器提供我们查阅文档的地方：即window窗口，即手机屏幕区域

containing block （包含块）

在CSS 2.1中，许多盒子的位置和大小是针对称为包含块的矩形框的边缘计算的。一般而言，生成的框充当后代框的包含块,一个盒子为它的后代“建立”包含块,每个盒子相对于其包含的块被赋予一个位置，但它不受该包含块的限制, 它可能溢出。

不同定位元素的包含块：

1：如果 position 属性是 static 或 relative 的话：包含块就是由它的最近的祖先块元素的内容区（content box）的边缘组成的。
2：如果 position 属性是 absolute 的话：包含块就是由它的最近的非static定位的祖先元素的padding box的边缘组成的。如果不存在满足条件的祖先元素，就为 ICB （初始包含块）
3：如果 position 属性是fixed 的话：这里需要区分当前的媒体类型，一般我们日常的使用情景就是在连续媒体下，包含块为 viewport
4：如果 position 属性是 absolute 或 fixed，包含块也可能是由满足以下条件的最近父级元素的padding box的边缘组成的：

transform or perspective 属性值不为 none
will-change 属性值为 transform 或 perspective
filter 属性值不为none 或者 will-change 属性值为 filter (only works on Firefox).

另：ICB（initial containing block）：
文档根元素所在包含块称为初始包含块；
初始包含块的的尺寸和位置，对于不同的媒体类型也是有不同的情况，但我们也只考虑连续媒体的情况：
尺寸：viewport的尺寸；
位置：首屏左上角

Normal flow：

即普通流：
正常流中的框属于格式化上下文，可以是块或内联，但不能同时使用。块级框参与块格式上下文。内联级别框参与内联格式化上下文。

Block formatting contexts

定义

A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with other elements.

块格式化上下文是一个css的渲染区域，它是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

创建BFC的方式：

根元素或包含根元素的元素；
浮动元素（元素的 float 不是 none）；
绝对定位元素（元素的 position 为 absolute 或 fixed）；
行内块元素（元素的 display 为 inline-block）；
overflow不为visible的块元素
….（这里mdn文档说明很全面，这里不全部列出）

BFC特性说明：

BFC内部的元素按常规流的规则布局
一个BFC对应一个独立、封闭的渲染区域，子元素的CSS样式不会影响BFC元素外部，也就数说，BFC元素会隔离自身与父元素。
注：这里我们常见的例子就是对于外边距合并中：子元素的外边距溢出到父元素外边这种情况，我们为父元素设置 overflow:auto,可以解决这个问题，其背后的原理就是让父元素创建了一个BFC，这样父元素内部的css样式，就不会影响到外部。当然在BFC内部，兄弟元素之间的外边距，该合并还是会合并。
在计算BFC元素高度时，浮动的子元素，参与BFC父元素的高度计算
注：这里可以为父元素添加属性让其创建BFC，可以用来解决的就是因为浮动而造成的高度塌陷问题。
浮动盒区域不叠加到BFC上；
注：这里对于浮动元素后的块级元素，布局时会当浮动元素’不存在’来处理，这时候可能会发生块级元素被float元素遮盖的现象，这时候让被遮盖的元素创建BFC，可以避免被覆盖的情况出现。

Inline formatting contexts

特性：

IFC内部的元素，按从左到右、从上到下的顺序排布（与文档方向有关）
IFC内部的每个元素，都可以通过设置vertical-align属性，来调整在垂直方向上的对齐
包含这些内部元素的矩形区域，形成的每一行，被称为line box

另，除了BFC，IFC还有FFC（flex）、GFC（grid）等，这里不再详细说明。