摘要:行宽的高度为包含框的高度,高度为行框中最高元素的高度。行框的宽度容纳不下子元素时,子元素会换到下一行显示,并且会产生新的行框。
一、BFC
Block Formatting Contexts (BFC,块级格式化上下文),就是 一个块级元素 的渲染显示规则。
(可以把 BFC 理解为一个封闭的大箱子,容器里面的子元素不会影响到外面的元素)。
1、BFC的布局规则例如以下:
①.内部的盒子会在垂直方向,一个个地放置。
②.盒子垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的上下margin会发生重叠。
③.每一个元素的左边,与包括的盒子的左边相接触,即使存在浮动也是如此。
④.BFC的区域不会与float重叠。
⑤.BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
⑥.计算BFC的高度时,浮动元素也參与计算。
2、介绍过了BFC的布局规范,再来说说哪些元素会触发BFC。
只要元素满足下面任一条件即可触发 BFC 特性
①.根元素。
②.float的属性不为none。
③.position为absolute或fixed。
④.display为inline-block;table-cell;table-caption;flex。
⑤.overflow不为visible。
3、接下来说说BFC的作用和原理
①、解决margin重叠问题
②、解决浮动高度塌陷问题
③、解决侵占浮动元素的问题
首先看看自适应两栏布局
我们先定义两个div:
4、然后定义css:
div {
width:300px;
}
.aside {
width: 100px;
height: 150px;
float: left;
background: black;
}
.main {
height:200px;
background-color:red;
}
效果图例如以下:
这正满足了规范的第三条:
每一个元素的左边,与包括的盒子的左边相接触。即使存在浮动也是如此。
所以假设我们须要将黑色区域撑到红色的左边。就须要利用规范的第四条:
BFC的区域不会与float重叠。
也就是说我们须要创造BFC区域。我们通过将红色区域的overflow设为hidden来触发BFC:
.main {
overflow:hidden;
height:200px;
background-color:red;
}
效果例如以下:
5、接下来看看清除内部浮动
**首先是父div套子div**
6、然后是css:
.child {
border:1px solid red;
width:100px;
height:100px;
float:left;
}
.parent {
border:1px solid black;
width:300px;
}
效果例如以下:
能够看到,父div压根就没有被撑开。
我们再回想一下BFC规范中的第六条:
计算BFC的高度时,浮动元素也參与计算。
所以我们须要将父div触发为BFC,也就是将其overflow设为hidden:
.parent {
border:1px solid black;
width:300px;
overflow:hidden;
}
效果例如以下:
能够看到父div已经撑开了。
7、再谈谈margin重叠问题。
先定义两个垂直的div:
然后定义margin:
.p {
width:200px;
height:50px;
margin:50px 0;
background-color:red;
}
能够看到margin重叠后的效果:
我们再看看BFC规范的第二条:
盒子垂直方向的距离由margin决定,属于用一个BFC的两个相邻Box的上下margin会发生重叠。
说明两者属于同一个BFC,所以我们须要两个div不属于同一个BFC。
为第二个div套一个父亲div。然后讲其overflow设为hidden来激活一个BFC就能够使margin不再重叠。
.wrap {
overflow:hidden;
}
效果例如以下:
IFC(Inline Formatting Contexts)
直译为”内联格式化上下文”,IFC的line box(线框)高度由其包含行内元素中最高的实际高度计算而来(不受到竖直方向的padding/margin影响)
水平居中:当一个块要在环境中水平居中时,设置其为inline-block则会在外层产生IFC,通过text-align则可以使其水平居中。
垂直居中:创建一个IFC,用其中一个元素撑开父元素的高度,然后设置其vertical-align:middle,其他行内元素则可以在此父元素下垂直居中。
BFC的布局规则例如以下:
1.ifc中的元素会在一行中从左到右排列。
2.在一行上的所有元素会在该区域形成一个行框。
3.行宽的高度为包含框的高度,高度为行框中最高元素的高度。
4.浮动的元素不会在行框中,并且浮动元素会压缩行框的宽度。
5.行框的宽度容纳不下子元素时,子元素会换到下一行显示,并且会产生新的行框。
6.行框的元素内遵循text-align和vertical-align。
如果大家觉得我的文章写的还不错的话,就关注 收藏一下哦!
还可以加我微信一起探讨下前端问题。
vx:rgz987
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/55031.html
摘要:行宽的高度为包含框的高度,高度为行框中最高元素的高度。行框的宽度容纳不下子元素时,子元素会换到下一行显示,并且会产生新的行框。 一、BFC Block Formatting Contexts (BFC,块级格式化上下文),就是 一个块级元素 的渲染显示规则。 (可以把 BFC 理解为一个封闭的大箱子,容器里面的子元素不会影响到外面的元素)。 1、BFC的布局规则例如以下: ①.内...
摘要:属于同一个的两个相邻的会发生重叠。的区域不会与重叠。计算的高度时,浮动元素也参与计算。给添加,触发新的,则行内级格式化上下文如何生成由的非替换元素生成。元素会位于与与之间,使得宽度缩短。 block-level box: display属性为block, list-item, table的元素,会生成block-level box。并且参与block fomatting context...
摘要:控制框块级元素和块框以及行内元素和行框相关的概念。规则在行内格式化上下文中,框一个接一个地水平排列,起点是包含块的顶部。 CSS的可视化格式模型 CSS中规定每一个元素都有自己的盒子模型(相当一规定了这个元素如何显示); 然后可视化格式模型则是把这些盒子模型按照规则摆放到页面上,也就是如何布局; 换句话说,盒子模型规定了怎么在页面上摆放盒子,盒子的相互作用等等; CSS的可视化格式模...
摘要:控制框块级元素和块框以及行内元素和行框相关的概念。规则在行内格式化上下文中,框一个接一个地水平排列,起点是包含块的顶部。 CSS的可视化格式模型 CSS中规定每一个元素都有自己的盒子模型(相当一规定了这个元素如何显示); 然后可视化格式模型则是把这些盒子模型按照规则摆放到页面上,也就是如何布局; 换句话说,盒子模型规定了怎么在页面上摆放盒子,盒子的相互作用等等; CSS的可视化格式模...
阅读 1913·2019-08-30 15:54
阅读 3568·2019-08-29 13:07
阅读 3086·2019-08-29 12:39
阅读 1754·2019-08-26 12:13
阅读 1511·2019-08-23 18:31
阅读 2122·2019-08-23 18:05
阅读 1805·2019-08-23 18:00
阅读 1014·2019-08-23 17:15