盒子模型
标准模型和IE模型
- 标准模型(标准w3c盒子模型)
width和height都是根据其content的宽高算的
width=concent
- IE盒子模型
IE 盒子模型的 content 部分包含了 border 和 padding。
width=content+padding+border
外边距重叠问题
1. 兄弟元素边距重叠
当两个垂直外边距相遇时,他们将形成一个外边距,合并后的外边距高度等于两个发生合并的外边距的高度中的较大者。比如两个 div 挨着,每个都上边距或者下边距,那么重叠的原则就是取最大值
注意:只有标准流中块框的垂直外边距才会发生外边距合并,行内框、浮动框或绝对定位之间的外边距不会合并。
以上情景比较常见,下面用父子元素边距重叠来引出 BFC(边距重叠解决方案)
2. 父子元素边距重叠
.father{
background: red;
width: 200px;
}
.child{
height: 200px;
width: 200px;
margin-top: 20px;
background: yellow;
}
<div class="father">
<div class="child">
</div>
</div>
我们可以看到父元素的红色背景是被子元素掩盖了的,此时父元素的实际高度为子元素的 height:200px。
原因是如果块元素的 margin-top 与它的第一个子元素的margin-top 之间没有 border、padding、inline content、 clearance 来分隔,或者块元素的 margin-bottom 与它的最后一个子元素的margin-bottom 之间没有 border、padding、inline content、height、min-height、 max-height 分隔,那么外边距会塌陷。子元素多余的外边距会被父元素的外边距截断。
此时如果给父元素加上 overflow:hidden
此时父元素的高度为220px,其实就是给父级元素创建一个BFC(块级格式化上下文),此时父元素是一个独立的块级渲染区域,该区域拥有一套渲染规格来约束块级盒子的布局,且与区域外部无关。
BFC
1. BFC的概念
Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。
BFC 即 Block Formatting Contexts (块级格式化上下文),它属于标准流 normal flow ( 在标准流中,元素按照其在 HTML 中的先后位置至上而下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整的一个新行,除非另外指定,否则所有元素默认都是普通流定位,也可以说,普通流中元素的位置由该元素在 HTML 文档中的位置决定 )。
具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一些特性。
可以说一个 BFC 就是一个矩形块的独立布局环境。
2. 触发BFC
- overflow 除了 visible 以外的值 (hidden、auto、scroll)
(如上例所示) - 绝对定位元素:position (absolute、fixed)
- 浮动元素:float 除 none 以外的值( float 常与 overflow 配合使用,因为 overflow 会创建新的 BFC,进而影响布局)
- display 为 inline-block、table-cells、flex
3. BFC的特点与应用