欢迎访问个人博客网站： www.zhuxin.club
格式化上下文
Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。
格式化上下文（Formatting context） 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
截至目前已发布的CSS3规范，格式化上下文主要包括四种类型：
Block fomatting context (块级格式化上下文，简称BFC)
Inline formatting context (内联级格式上下文，简称IFC)
Flexible Formatting Contex（弹性盒格式化上下文，简称FFC）
Grids Formatting Context(网格格式化上下文，简称GFC)
1. BFC
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box（display 属性为 block, list-item, table 的元素）参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
如果一个元素具有 BFC，内部子元素再怎么翻江倒海、翻 云覆雨，都不会影响外部的元素。这是BFC最核心的特点
1.1 BFC规则特点
- BFC内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC内部的两个相邻Box的margin会发生重叠，不同BFC之间则不会发生margin重叠
- 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算
1.2 创建BFC的方法
- html根元素;
- float 的值不为 none;
- overflow 的值不为visible；
- display 的值为 table-cell、table-caption , inline-block ,flex, inline-flex,grid,inline-grid中的任何一个；
- position 的值不为 relative 和 static。
1.3 BFC应用场景
（1）防止垂直方向margin重叠
块级元素之间的margin-top和margin-bottom有时会出现margin合并的现象，如下图示例：
<style>
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
</style>
<body>
<p>Haha</p>
<p>Hehe</p>
</body>
根据上面介绍BFC的规则特点，我们可以在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了：
<style>
.wrap {
overflow: hidden;
}
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
</style>
<body>
<p>Haha</p>
<div class="wrap">
<p>Hehe</p>
</div>
</body>
（2）创建自适应两栏布局
<style>
body {
width: 300px;
position: relative;
}
.aside {
width: 100px;
height: 150px;
float: left;
background: #f66;
}
.main {
height: 200px;
background: #fcc;
}
</style>
<body>
<div class="aside"></div>
<div class="main"></div>
</body>
由于float脱离文档流的，.main和,aside元素存在重叠部分。根据BFC不会与float box重叠以及每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此的规则特点，我们让.main成为一个BFC：
.main {
overflow: hidden;
}
当触发main生成BFC后，这个新的BFC不会与浮动的aside重叠。因此会根据包含块的宽度，和aside的宽度变化，自动变宽或变窄（当main没有设置固定尺寸时）。这就是一种自适应两栏布局
（3）清除浮动
<style>
.par {
border: 5px solid #fcc;
width: 300px;
}
.child {
border: 5px solid #f66;
width:100px;
height: 100px;
float: left;
}
</style>
<body>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
我们在使用浮动时，如果浮动元素的父元素没有指定高度，会造成父级元素高度塌陷
由于计算BFC的高度时，浮动元素也参与计算。所以创建BFC即可达到清除浮动，避免父元素高度塌陷的效果
.par {
overflow: hidden;
}
2. IFC
IFC（行级格式化上下文Inline Formatting Context）
IFC布局规则：
- 在一个行内格式化上下文中，盒是一个接一个水平放置
- 这些盒之间的水平margin，border和padding都有效
- 盒可能以不同的方式竖直对齐：以它们的底部或者顶部对齐，或者以它们里面的文本的基线对齐
- 行内块级元素之间默认留有间隙
- 矩形区域包含着来自一行的盒子叫做line box，line box的宽度由浮动情况和它的包含块决定，高度由line-height的计算结果决定
3. FFC
FFC全称：Flexible Formatting Context弹性盒格式化上下文
CSS3引入了一种新的布局模型——flex布局。
flex是flexible box的缩写，一般称之为弹性盒模型。和CSS3其他属性不一样，flexbox并不是一个属性，而是一个模块，包括多个CSS3属性。flex布局提供一种更加有效的方式来进行容器内的项目布局，以适应各种类型的显示设备和各种尺寸的屏幕，使用Flexbox布局实际上就是声明创建了FFC(自适应格式上下文)
4. GFC
GFC全称：Grids Formatting Context网格格式化上下文
CSS3引入的一种新的布局模型——Grids网格布局，目前暂未推广使用，使用频率较低，简单了解即可。
Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。
Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！