Box与Formatting Context

一直对css都不够重视，觉得简单，其实也是有些知识的。所以抽空做了些总结

参考文献：mdn的css文档、w3c css规范

w3c是制定标准的，而mdn的目标是做开发者服务的开发文档。

但实际上，大家还是用mdn多一些，颜值高，讲的没那么啰嗦。当然要是还刨根问题还得是w3c！

Box model(盒子模型)

当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）。

每个盒子尺寸(box dimensions)由四个部分组成，包括：边距[margging]，边框[border]，填充[padding]，和实际内容[content width & content height]

简单来说就是：取得元素的内容并将其放在一个独立的元素盒子中，然后在其周边加上内外边距、边框——这就是我们所说的盒子模型。

注意:

正常情况下，区块（盒子）的上下外边距有时会合并（即折叠）为单个边距，其大小为两个边距中的最大值（或如果它们相等，则仅为其中一个），这种行为称为外边距折叠。

<style>

  div {

    height: 20px;

    background-color: pink;

  }

  .box1 {

    margin-bottom: 10px;

  }

  .box2 {

    margin-top: 20px;

  }

</style>

<body>

  <div class="box1"></div>

  <div class="box2"></div>

</body>

visual formatting model(视觉格式化模型)

官方标准中对于视觉格式化模型的阐述为 how user agents process the document tree for visual media. 直译过来就是用户代理在视觉媒体下如何处理文档树的意思。

通俗和侠义点讲就是视觉格式化模型就是规定了网页如何在你设备上的浏览器中如何被渲染和展示。

视觉媒体：visual media 指得是用户可视化媒体，如手机，电脑、打印机、幻灯机、电影放映机、dvd等

用户代理：user agents，简称UA，指的是用户在可视化媒体(终端)上使用（访问并解析html）的程序，最常见的比如浏览器、小程序或原生安卓和ios的webview

文档树: document tree，它是文档元素分级结构的形象表示。一个文档结构树包含根元素，根元素是最顶级的元素

在可视化格式化模型规定中，文档树中的每个元素根据【盒子模型】规范生成零个或多个盒子。

且这些盒子的布局受以下因素的控制：

盒子尺寸和类型（下边讲）。

定位方案 （正常流、浮动和绝对定位）。

文档树中元素之间的关系。

其它因素（例如，viewport的大小、置换的固有尺寸等）

viewport（可视窗口）

User agents for continuous media generally offer users a viewport through which users consult a document.

用户代理为连续媒体提供的一个（呈现解析和渲染后的文档树的）区域，用户通过这个区域可以阅读文档内容。在（用户代理为）浏览器中，一般指的就是浏览器用于呈现网页的区域。

注意 continuous media(连续媒体) 其实就是visual media的一种，比如网页。但是像打印机打印的文档内容必须是分页的，所以就是paged media（分页媒体）。这里有详细的媒体类型介绍。

当视口在小于文档渲染的尺寸时，必须提供一种滚动机制，最常见的就是浏览器的滚动条，通过滚动条我们就可以浏览超出视口的文档部分，也就是文档中阐述的 When the viewport is smaller than the area of the canvas on which the document is rendered, the user agent should offer a scrolling mechanism.

当然关于视口的知识点可不只是上述的这么简单，比如在移动web中，viewport的相关属性对于移动web的开发至关重要，但本文暂不涉及其他关于视口的知识点。

Containing blocks（包含块）

它是【视觉格式化模型】的一个重要概念，它与盒子模型非常的类似，也可以理解为一个矩形，

而这个矩形的作用是为它里面包含的元素提供一个参考，元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。

包含块简单说就是定位参考框，或者定位坐标参考系，元素一旦定义了定位显示（相对、绝对、固定）都具有包含块性质，它所包含的定位元素都将以该包含块为坐标系进行定位和调整。

除了定位参考还有宽度参考等等等等很多重要的作用~

Controlling box generation（控制【box】的生成）

CSS的【视觉格式化模型】一部分工作是从文档元素(document tree element)生成盒(box)。

根据CSS属性display属性，可以生成不同类型的盒。

Block-level elements & block boxes（块级元素和块盒）

块级元素视觉上呈现为块,竖直排列

当元素的CSS属性display为block,list-item或table时,它就是块级元素

css排班布局

正如上文所说，css将网页上的元素都是为一个个盒子，那么这些盒子是怎么排版的呢？

css有多种布局方式，接下来一一介绍

常规布局

元素的类型和 display 属性会决定这 Box 的类型。不同类型的 Box 会参与不同的 Formatting Context，所以 Box 内的元素会以不同的方式渲染

我们总结一下有哪些类型的盒子模型：

block-level box：块状盒子模型。display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；

inline-level box：行内盒子模型。display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；

run-in box：css3加的之后讲

Formatting context

Formatting context 即格式化上下文，是 W3C CSS规范中的一个概念：

它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用

CSS2.1 中只有 BFC 和 IFC，CSS3 增加了 GFC 和 FFC。

IFC：Inline Formatting Context（内联格式化上下文）

BFC：Block Formatting Context（块级格式化上下文）

GFC：Grids Formatting Context（网格格式化上下文）

FFC：Flexible Formatting Context（弹性盒格式化上下文）

通俗的理解就是：

通过刚才说的盒模型我们知道 HTML 页面是由一个个盒子组成的，

但那这些盒子该怎么摆放在页面上面呢？--这其实就是格式化上下文的工作；

比如：块元素“自带换行符”、行内元素无法设置上下外边距和高度 等等等

这些我们平时觉得理所应当的规则 其实就是格式化上下文的组成部分，

浏览器就是按照这些规则来将我们写的页面展示给用户看的；

BFC

即块级格式化上下文，它是一个独立的渲染区域，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC可以让元素成为隔离独立的容器，且容器内的子元素不会影响到外面的布局

BFC布局规则：

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算

如何创建BFC:

根元素body
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible

BFC的应用场景

解决容器内子元素浮动、绝对定位等原因造成的高度塌陷的问题；