CSS中包含块,层叠上下文,BFC,IFC究竟是什么?

2017-11-03 20:02:09来源:CSDN作者:zhanghuiqi205人点击

分享

1.什么是包含块?

如果有两个div,一个是父元素,一个是子元素。父元素会决定子元素的大小和定位。简单来说,就是可以决定一个元素大小和定位的元素。一个元素的css盒子为它的内部元素创建了包含块 。通常情况下,一个元素的包含块是由离它最近的块级祖先元素的内容边界决定的。但是当元素被设置为绝对定时,此时该元素的包含块是由离它最近的position:relative或者position:absolute的祖先元素决定的。

2.层叠上下文?

层叠上下文是HTML中的一个三维的概念,实际上网页除了x轴,y轴,它还有z轴。z轴往往都是用来设定层的先后顺序的。一个元素在z轴方向上的堆叠顺序,是由层叠上下文和层叠级别这两个因素决定的。

3.BFC和IFC

在CSS中,页面上任何一个元素都可以看成是一个盒子。在普通的文档流中,盒子会参与一种格式上下文,这个盒子可能是块盒子,也可能是行内盒子。一个盒子只能是块盒子或者行内盒子,不能同时兼顾。其中块盒子参与BFC(块级格式上下文),行内盒子参与IFC(行级格式上下文)。元素的类型和display属性决定了盒子的类型。不同的盒子会参与不同的格式上下文。

BFC:它是一个独立的渲染区域,只有块盒子参与。如何创建呢?浮动元素,绝对定位元素,元素属性为inline-block,table-cption,table-cell以及overflow属性不为visible的元素将会创建一个新的块级格式上下文。

BFC的特点:一是,在一个BFC中,盒子从顶端开始垂直一个接着一个地排列。两个相邻盒子之间的垂直间距由margin属性决定。在同一个BFC中,两个相邻的盒子之间垂直方向上外边距会叠加。二是,在图个BFC中,每一个盒子的左外边界会紧贴这容器的左边,即使存在浮动元素也是如此。

BFC的用处:避免垂直外边距叠加,清除浮动,实现自适应布局。

举个例子:比如浮动元素会使得父元素高度塌陷,如果我们给父元素增加属性:overflow:hidden就可以。这就是因为属性overflow:hidden使得父元素变成了一个BFC,由于BFC在计算他的自身高度的时候,会把浮动子元素高度算进去。此时就相当于清除浮动。

如图:没有加之前是这样的

加了之后是这样的:



BFC其实用处还有很多,比如上面说的去除外边距叠加,浮动元素旁边的文本环绕等问题,都可以解决。大家可以在实际的项目或者大型优秀网站的源码上多多留意和学习,那么大家的CSS一定会有大的提升。

IFC的内容,主要是使得元素的水平方向的margin和padding有效果。这个在项目中涉及的不是很多。大家可以查询一下网上的其他资源。



微信扫一扫

第七城市微信公众平台