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

总体结构说明：

• 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特性说明：

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

Inline formatting contexts

特性：

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

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