CSS布局规则

FOUC

Flash Of Unstyled Content：在用户定义的css样式被加载之前，浏览器会使用默认样式显示html文档，当用户样式加载完后，会因为文档重新被渲染而造成页面闪烁。

CSS布局介绍

一个网页是由很多个Box组成的，Box的类型是由元素的类型和display属性决定的。而Formatting Context是决定文档如何渲染的规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。因此不同类型的Box经过不同的Formatting Context会呈现不同的效果。

Box类型主要分为三种：

block-level box

display属性为block，list-item，table的元素。block-level box参与BFC布局规则

inline-level box

display属性为inline，inline-block，inline-table的元素。inline-level box参与IFC布局规则。

run-in box

run-in是一个行内块级元素，不过它与inline-block的表现是完全不同的。它的表现与它的后一个直接元素直接挂钩。如果它的后一个直接元素是块级元素的话，它会表现为行内元素插入到该块级元素中；如果它的后一个元素是行内元素的话，它就会表现为块级元素，坦白的讲就是跟后一个元素的表现是完全相反的,最后，它跟前一个元素的表现形式是无关的。

BFC

BFC布局规则

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

如何创建BFC

float值不为none
position的值不为static，relative
display值是inline-block，table-cell，flex，table-caption，inline-flex
overflow不为visible

IFC

IFC布局规则

1.框会从包含快的顶部开始，然后一个接一个的排列。
2.在放置这些框的时候，他们在水平方向上的外边距，边框和内边距所占的空间都会被考虑在内（这样就得到了一个一个的框）。然而在垂直方向上，这些框可能会以不同的方式来对齐，比如他们可以顶部对齐，或者底部对齐也有可能按照文本的基线对齐。而把这一行上的框都包含进去的一个大框我们称之为改行的行框。水平的padding,border,margin有效，竖直方向则无效。不能指定框高。
3.行宽的宽度由包含块和存在的浮动决定的。行框的高度至少会高到足以包含他内部的所有框。
4.当一行上的行级总宽度（某一个小框的宽度或者若干个小框的总宽度）小于行宽的时候，他们在行宽内的水平方向上的排布由text-align决定。
5.当一个行内框的宽度超过了该行的行宽的时候，就会被分成几个框。(ex.文字换行的时候 字都不在同一行了，那换行的时候自然就会多一份框，自然也就多了一份行宽)但是如果设置这个框就不能被分割的话（比如，文字强制不给换行white-space设置为nowrap）那么这时候该行内框就会溢出该行的行宽。
6.一般情况下行宽的左边紧贴在他的包含块的左边，同样他的右边也是紧贴在其包含块的右边。但是也不一定，比如出现浮动的话，浮动元素可能会插在包含块和行框之间。所以一般在同一个IFC中行框通常有相同的宽度（包含快的宽度）但是某一行的行宽的宽度也可能受浮动元素影响，减少了水平可用的宽度了。在同一个IFC中，行框的高度通常是变化的，不一定的，比如某一行的某个框是个很高的图片，而改行框中其他框只是文字。
7.计算行框内各个框的高度，对于非替换元素就是起line-height,而对于替换元素就是边界框的高度了。 行框的高是最顶端框的顶边到最底端框的底边的距离。

GFC

网格布局格式化上下文：
当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。