一、格式化上下文
1.1 FC
FC的全称是:Formatting Contexts 格式化上下文
常见的FC有:
-
BFC(Block Formatting Contexts):块级格式化上下文
-
IFC(Inline Formatting Contexts):内联格式化上下文
-
GFC(GridLayout Formatting Contexts):网格布局格式化上下文
-
FFC(Flex Formatting Contexts):自适应格式化上下文
1.2 BFC
Block Formatting Context 叫做“块级格式化上下文”。
特点
- 垂直方向盒子一个个排列
- 边距由margin决定,相邻盒子的margin会合并
- 盒子与容器的左边贴边,即使是浮动元素也是如此
-
BFC区域不会与浮动的元素重叠
-
BFC是一个独立的容器,内部不会影响外部的,外部不会影响内部的
让父盒子变为BFC区域的方法
- 根元素;
- float的属性不为none
- position为absolute或fixed
- display为inline-block,table-cell,table-caption,flex;
- overflow不为visible
1.3 IFC
IFC(Inline Formatting Contexts)为"内联格式化上下文"
特点
-
IFC的高度由最高的线框决定(线框高度可以不同,是以内容计算高度的,不受垂直方向的margin,padding,border的影响)
-
IFC中的线框紧贴在IFC中,会被浮动的元素扰乱,导致IFC区域缩短
-
IFC区域内每个线框的高度可以不同
-
IFC会被块级元素切断,在垂直方向上产生两个IFC
对齐
-
行内块元素单行文本,文本基线对齐
-
行内块元素多行文本,最后一行文本基线对齐
-
行内块元素没有内容,底边对齐
-
行内元素单行文本,文本基线对齐
-
行内元素没有文本,基线对齐
居中
水平居中:当一个块要在盒子中水平居中时,设置其为inline-block则会在外层产生IFC,通过text-align则可以使其水平居中。
垂直居中:插入一个伪元素转化为行内块,设置高度为盒子宽度,然后设置其vertical-align:middle,其他行内元素则可以在此父元素下垂直居中。 或不插入伪元素,用一个元素将行高设置为父元素的高度也可以