10分钟了解CSS BFC基本原理及其运用

日期:2020-12-10 类型:科技新闻 

关键词:小程序 活动,微信小程序demo,微信小程序游戏开发价格,手机小程序怎么做,视频播放微信小程序

1、普遍精准定位计划方案

在讲 BFC 以前,大家先来掌握1下普遍的精准定位计划方案,精准定位计划方案是操纵元素的合理布局,有3种普遍计划方案:

一般流 (normal flow)

在一般流中,元素依照其在 HTML 中的前后部位高于一切而下合理布局,在这个全过程中,行内元素水平排序,直至当行被占满随后换行,块级元素则会被3D渲染为详细的1个新行,除非此外特定,不然全部元素默认设置全是一般流精准定位,还可以说,一般流中元素的部位由该元素在 HTML 文本文档中的部位决策。

波动 (float)

在波动合理布局中,元素最先依照一般流的部位出現,随后依据波动的方位尽量的向左侧或右侧偏位,其实际效果与包装印刷排版中的文字围绕类似。

肯定精准定位 (absolute positioning)

在肯定精准定位合理布局中,元素会总体摆脱一般流,因而肯定精准定位元素不容易对其弟兄元素导致危害,而元素实际的部位由肯定精准定位的座标决策。

2、BFC 定义

Formatting context(文件格式化左右文) 是 W3C CSS2.1 标准中的1个定义。它是网页页面中的1块3D渲染地区,而且有1套3D渲染标准,它决策了其子元素将怎样精准定位,和和别的元素的关联和互相功效。

那末 BFC 是甚么呢?

BFC 即 Block Formatting Contexts (块级文件格式化左右文),它属于上述精准定位计划方案的一般流。

具备 BFC 特点的元素能够看做是防护了的单独器皿,器皿里边的元素不容易在合理布局上危害到外面的元素,而且 BFC 具备一般器皿所沒有的1些特点。

通俗化1点来说,能够把 BFC 了解为1个封闭式的大箱子,箱子內部的元素不管怎样翻江搅海,都不容易危害到外界。

3、开启 BFC

要是元素考虑下面任1标准便可开启 BFC 特点:

  1. body 根元素
  2. 波动元素:float 除 none 之外的值
  3. 肯定精准定位元素:position (absolute、fixed)
  4. display 为 inline-block、table-cells、flex
  5. overflow 除 visible 之外的值 (hidden、auto、scroll)

4、BFC 特点及运用

1. 同1个 BFC 下外边距会产生折叠

<head>
div{
    width: 100px;
    height: 100px;
    background: lightblue;
    margin: 100px;
}
</head>
<body>
    <div></div>
    <div></div>
</body>

从实际效果上看,由于两个 div 元素都处在同1个 BFC 器皿下 (这里指 body 元素) 因此第1个 div 的下边距和第2个 div 的上边距产生了重合,因此两个盒子之间隔离仅有 100px,而并不是 200px。

最先这并不是 CSS 的 bug,大家能够了解为1种标准,假如要想防止外边距的重合,能够将其放在不一样的 BFC 器皿中。

<div class="container">
    <p></p>
</div>
<div class="container">
    <p></p>
</div>
.container {
    overflow: hidden;
}
p {
    width: 100px;
    height: 100px;
    background: lightblue;
    margin: 100px;
}

这时候候,两个盒子边距就变为了 200px

2. BFC 能够包括波动的元素(消除波动)

大家都了解,波动的元素会摆脱一般文本文档流,看来下下面1个事例

<div style="border: 1px solid #000;">
    <div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>

因为器皿内元素波动,摆脱了文本文档流,因此器皿只剩余 2px 的边距高宽比。假如使开启器皿的 BFC,那末器皿可能包裹着波动元素。

<div style="border: 1px solid #000;overflow: hidden">
    <div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>

实际效果如图:

3. BFC 能够阻拦元素被波动元素遮盖

先看来1个文本围绕实际效果:

<div style="height: 100px;width: 100px;float: left;background: lightblue">我是1个左波动的元素</div>
<div style="width: 200px; height: 200px;background: #eee">我是1个沒有设定波动, 
也沒有开启 BFC 元素, width: 200px; height:200px; background: #eee;</div>

这时候候实际上第2个元素有一部分被波动元素所遮盖,(可是文字信息内容不容易被波动元素所遮盖) 假如想防止元素被遮盖,可触第2个元素的 BFC 特点,在第2个元素中添加 overflow: hidden,就会变为:

这个方式能够用来完成多列自融入合理布局,实际效果非常好,这时候候左侧的宽度固定不动,右侧的內容自融入宽度(去掉上面右侧內容的宽度)。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。