井井客

搜索

BFC-块级盒参与块级格式上下文

理解BFC即块级盒参与块级格式上下文。

BFC(Block Formatting Context)是一个独立的布局环境,BFC中的元素的布局是不受外界的影响(我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响),并且在一个BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列。

BFC布局规则

1) 内部的盒子会在垂直方向,一个个地放置
2) 盒子垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的上下margin会发生重叠
3) 每个元素的左边,与包含的盒子的左边相接触,即使存在浮动也是如此
4) BFC的区域不会与float重叠
5) BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之也如此
6) 计算BFC的高度时,浮动元素也参与计算

哪些元素会产生BFC

1) 根元素
2) float的属性不为none
3) position为absolute或fixed
4) display为inline-block,table-cell,table-caption,flex
5) overflow不为visible

IFC-行内级盒参与行级格式上下文

IFC (Inline Formatting Context)中盒子水平放置,一个接着一个,从包含块的顶部开始。
在盒子间margins,borders,和padding的水平方向的值是有效。
主要影响IFC内布局的样式:font-size、line-height、height、vertical-align。
行盒模型(line box)是一块显示区域根据块状容器内,每一行的多个内联元素,都会共同生成一个行盒模型。
行高是指上下文本行的基线间的垂直距离

GFC-网格布局格式化上下文

当为一个元素设置display值为grid的时候,此元素将会获得一个独立的渲染区域,我们可以通过在网格容器、上定义网格定义行和网格定义列属性各在网格项目上定义网格行和网格列为每一个网格项目定义位置和空间。

FFC-自适应格式化上下文

display值为flex或者inline-flex的元素将会生成自适应容器。
置为 flex 的容器被渲染为一个块级元素,而设置为 inline-flex 的容器则渲染为一个行内元素。
伸缩容器中的每一个子元素都是一个伸缩项目。
伸缩项目可以是任意数量的。
伸缩容器外和伸缩项目内的一切元素都不受影响。
FFC与BFC有点儿类似,但仍有以下几点区别:
1) Flexbox 不支持 ::first-line 和 ::first-letter 这两种伪元素
2) vertical-align 对 Flexbox 中的子元素 是没有效果的
3) float 和 clear 属性对 Flexbox 中的子元素是没有效果的,也不会使子元素脱离文档流 (但是对Flexbox 是有效果的!)
4) 多栏布局(column-*) 在 Flexbox 中也是失效的,就是说我们不能使用多栏布局在Flexbox 排列其下的子元素
5) Flexbox 下的子元素不会继承父级容器的宽

文章TAG:CSS

作者:井井客整理来源:转载
本文标题:BFC-块级盒参与块级格式上下文
本文链接:/c/29346.html

上一篇:CSS水平居中有哪些实现方式
下一篇:css隐藏元素

文章分类

相关阅读

随便看看