盒模型

标准模型和IE模型

标准盒模型

IE盒模型

区别

• 标准

容器内容由width和height决定
容器占页面大小由width+padding+border决定

• 怪异

容器内容由width-border-padding决定 容器占页面大小由width和height决定

切换

• 标准【默认】

.app {
    box-sizing: content-box
}

• IE【怪异】

.app {
    box-sizing: border-box
}

边距重叠

父子元素

添加overflow: hidden; 使用BFC来解决，给父级元素创建了一个BFC

兄弟元素

取最大值

BFC

BFC

块级格式化上下文

Block fomatting context：block-level box + Formatting Context

Formatting context

Formatting context是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系、相互作用。 最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context(简称IFC)。

CSS2.1 中只有BFC和IFC, CSS3中还增加了G（grid）FC和F(flex)FC。

原理

块级元素渲染区域以BFC方式渲染。

规则

• 块级元素会在垂直方向一个接一个的排列
• 垂直方向的边距会重叠，取最大值
• BFC元素不会与浮动元素重叠
• 计算BFC的高度时，浮动元素也参与计算
• 独立容器相互不影响，子元素不会影响到外面的元素

创建BFC

• html根元素
• overflow：不为visible
• float：不为none
• position：不为static或者relative
• display：为inline-block、table-cell、flex、table-caption、inline-flex

应用

防止margin塌陷

结果：垂直方向的margin不会溢出

防止margin重叠

结果：垂直方向的边距会重叠

解决办法：

• 底部元素设置为浮动 float:left;
• 底部元素的position的值为absolute/fixed
• 在设置margin-top/bottom值时统一设置上或下
• 外层添加一个BFC元素【子元素不会影响到外面的元素】

清除浮动

结果：计算BFC的高度时，浮动元素也参与计算

浮动元素与普通元素的重叠

结果：BFC的区域不会与浮动元素的box重叠