题解 | #盒模型- 外边距折叠#
盒模型- 外边距折叠
https://www.nowcoder.com/practice/9c6f4a2626d34b798f20ed31ba17e441
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.top,.bottom{
width: 100px;
height: 100px;
margin: 10px;
}
.top{
background-color: green;
}
.bottom{
position: absolute;
background-color: red;
}
</style>
</head>
<body>
<section class="top"></section>
<section class="bottom"></section>
</body>
</html>
常规块盒子有一种机制叫外边距折叠，即垂直方向上的两个外边距相遇时，会折叠成一个外边距，且折叠之后的外边距高度为两者之中较大的那一个。现在给类名为"top"、"bottom"两个盒子都设置宽度、高度且都为"100px"、都设置外边距且都为"10px"，可以添加任意颜色便于区分两个盒子。此时通过调试工具可以发现两个盒子之间的距离为"10px"，并不是"20px"，说明已经发生了外边距折叠。外边距折叠好像很奇怪，实际上却很有用。当一个页面包含了多个段落，如果没有外边距折叠，从第二个段落开始，所有段落的间距都是最上方段落的上外边距的两倍，有了外边距折叠，段落间距才会相等。如果想要清除两个盒子之间的外边距折叠，可以给目标盒子设置以下属性：1. display: inline-block2. float属性值不是"none"的元素3. 绝对定位现在给类名为"bottom"的盒子设置"position"属性为"absolute"，可以看到下方的盒子向下移动了，此时外边距折叠失效。
开启BFC即可解决外边距合并问题.
BFC(Block Formatting Context)区块格式化上下文
- 开启BFC的区域,是一块
- ,内部渲染不会影响到外部
- 不同的BFC区域,
开启BFC能解决什么问题
- 开启BFC，其 不会再产生margin塌陷问题(不会和他的子元素产生margin合并)
- 开启BFC，就算子元素浮动， (计算高度时不再无视浮动元素)
- 开启BFC， (不会与浮动元素重叠，会避开浮动元素排布)
如何开启BFC
- 根元素(HTML)自身是一个BFC
- 设置float 属性不为none
- 设置position 属性为设置
- 设置 overflow属性值不为visible
- 行内块盒(inline-block )
- 设置 display为flow-root 的元素
- 伸缩项目(flex盒子内的item )
- 多列容器(设置column-count )
- 表格元素(table thead tbody tfoot tr th td caption)
- column-span为all的元素(表格第一行横跨所有列)
