盒模型
标准模型和IE模型
标准盒模型
IE盒模型
区别
- 标准
容器内容由width和height决定
容器占页面大小由width+padding+border决定
- 怪异
容器内容由width-border-padding决定 容器占页面大小由width和height决定
切换
- 标准【默认】
css
.app {
box-sizing: content-box
}
.app {
box-sizing: content-box
}
- IE【怪异】
css
.app {
box-sizing: border-box
}
.app {
box-sizing: border-box
}
边距重叠
父子元素
添加overflow: hidden;
使用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重叠