BFC和IFC

我们先看一些基本概念。
1.元素框
CSS假设所有元素都会生成一个或多个BOX,称为元素框。元素框中心有内容区,内容区外周围包括padding、border、margin。
2.包含块
一个盒相对于它的包含块的边界来渲染。通常盒为它的后代元素建立包含块。注意盒并不受它的包含块的限制,当它的布局跑到包含块的外面时称为溢出(overflow)。包括块是元素的布局上下文。
3.盒模型
CSS框模型规定了元素框处理元素内容、内边距、边框、外边距的方式。常见的框模型有两种:块级盒子Block Box和行级盒子Line Box。
4.BFC
每个元素或者说每个Box会根据设置的display值,去选择渲染它的方式,不同的display有不同层级:block-level box块级、inline-level box行级、run-in box插入型。不同的层级有不同的渲染规则,比如BFC和IFC。
BFC是块级格式化上下文,规定了块级盒子的渲染布局方式。
4.1.BFC的特点
a).内部盒子会在垂直方向排列
b).同一个BFC中的元素可能会发生margin collapse;
c).BFC就是页面上的一个隔离的独立容器,里外互相不影响
d).计算BFC的高度时,考虑BFC所包含的所有子元素,连浮动元素也参与计算;
e).当元素不是BFC的子元素的时候,浮动元素高度不参与BFC计算(既是常见的盒子塌陷问题)
生成BFC的环境,则其不会被任何所破坏,就是一个整体
比如inline的文字,不能被破坏,是一个整体,那么文字环绕布局是怎么做的呢?
4.2.如何产生BFC
a).根元素
b).float属性不为none
c).position为absolute或fixed
d).display为inline-block, table-cell, table-caption, flex, inline-flex
e).overflow不为visible
5.Block Box
display:block、list-item 以及 table
在正常流中,块级元素框的水平部分 = 其父元素的width
是此元素的margin-left+border-left+padding-left+width+padding-right+border-right+margin-right
5.1.负margin
两种情况:水平和垂直方向
5.1.1.水平方向
a).width不固定
因为以上7个值相加要等于父元素width,所以使用负margin会造成width增加
b).width固定
margin-right增大.
5.1.2.垂直方向
a).margin-bottom为负值
不会造成元素本身的移动,而是造成兄弟元素往上移动
b).margin-top为负值
元素本身及后续元素向上移动
5.2.负margin与float应用,双飞翼
6.Line Box
每一行称为一条Line Box,它又是由这一行的许多inline-box组成,它的高度可以直接由line-height决定,line boxes的高度垂直堆叠形成了containing box的高度,就是我们见到的div或是p标签之类的高度了。

此条目发表在CSS分类目录。将固定链接加入收藏夹。

发表评论

电子邮件地址不会被公开。 必填项已用*标注