⭐️ 更多前端技术和知识点,搜索订阅号
JS 菌
订阅
BFC(Block Formatting Contexts),块级格式化上下文。BFC 实际上就是页面中一块渲染区域,该区域与其他区域隔离开来。容器里面子元素不会影响到外部,外部的元素也不会影响到容器里面的子元素。 ?
规范
BFC 内部的盒子会从上至下一个接着一个顺序排列。BFC 内的垂直方向的盒子距离以 margin 属性为准,上下 margin 会叠加。每个元素的左侧最外层边界与包含块 BFC 的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。BFC 的区域不会与 float box 折叠。BFC 的高度也会受到浮动元素的影响,浮动元素参与计算。 ?
主要作用
如何创建 BFC
display 为 table 会产生一个匿名的 table-cell;display 为 flow-rot 是一种 flow 布局,在 CSS2 中被引入。contain 属性可以更有效率的渲染元素,但兼容性差,详情见:https://developers.google.com/web/updates/2016/06/css-containment;flex 布局、grid 布局产生的格式化上下文,有时也被人称为 FFC/GFC
几个例子
防塌陷 ?
div {
border: 1px solid gray;
/* overflow: hidden; */
}
p {
float: left;
}
<div>
<p>✈</p>
</div>
创建 BFC 后
避免折叠 ?
div:nth-of-type(2) {
background: red;
/* overflow: hidden; */
}
.this {
border: 1px solid gray;
margin: 20px 0;
}
<div class="this">1️⃣</div>
<div>
<div class="this">2️⃣</div>
</div>
创建 BFC 后
IFC(Inline Formatting Contexts),内联格式化上下文。IFC 中的 line-box (也称行盒)的高度是根据包含行内元素中最高的实际高度计算而来。(不受垂直方向的 padding/margin 的影响) ?
相关知识点
顶点、中线、基线、底线,以及行距、半行距、font-size 大小、line-height 大小见图:
line-height 的计算方法:
font-size * 百分比
,即为行高font-size * 1.5
有关 line-height 的计算方法见这篇文章 https://segmentfault.com/a/1190000003038583
规范
行内元素从包含块顶端水平方向上逐一排列,水平方向上的 margin/border/padding 生效。行内元素在垂直方向上可按照顶部、底部或基线对其。
当几个行内元素不能在一个单独的行盒中水平放置时,他们会被分配给两个或更多的(vertically-stacked line boxes)垂直栈上的行盒,因此,一个段落是很多行盒的垂直栈。这些行盒不会在垂直方向上被分离(除非在其他地方有特殊规定),并且他们也不重叠。
vertical-align
属性决定垂直方向上的对齐方式。text-align
决定。折行:
<p>balabala ...<span class="hl">hello world</span> inline formating context</p>
空间不足的折行:
主要作用
text-align
进行水平居中vertical-align
属性进行垂直居中水平垂直居中 ?
<p>hello <span class="big">world</span> inline formating context</p>
p {
border: 1px solid gray;
text-align: center;
}
.big {
font-size: 60px;
vertical-align: middle;
}
其他还有 GFC、FFC 就是二维的网格布局和自适应的 Flex 布局。两种布局产生网格布局格式化上下文和自适应格式化上下文。
参考: