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)定义位置和空间。