盒模型
盒模型分为 content-box（内容盒）和 border-box（边框盒）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
.content-box {
margin:25px;
border: 5px solid red;
padding: 10px;
box-sizing: content-box;
width: 100px;
}
.border-box {
margin:25px;
border: 5px solid red;
padding: 10px;
box-sizing: border-box;
width:100px;
}
</style>
</head>
<body>
<div class="content-box">
内容盒
</div>
<div class="border-box">
边框盒
</div>
</body>
</html>
上面代码中，设置内容盒和边框盒均为 100px，实际显示中两种盒模型的宽度是不一样的。
内容盒是内容的宽度为100px。
边框盒是内容，内边距和边框的宽度之和为100px。
content-box 的 width 表示内容区的宽度，不包含 padding 和 border； border-box 的 width 表示内容区 + padding + border 的总和。
一般优先使用 border-box, 因为 border-box 更好用。
margin 合并
子元素间的 margin 合并
可以看到，第一个 div 的 margin-bottom 会和第二个 div 的 margin-top 合并。
父元素和子元素间的 margin 合并
parent 的上边距会和第一个 div 的上边距重合，parent 的下边距会和最后一个 div 的下边距重合。
这种 margin 合并只存在与上下外边距，左右外边距不会合并。
取消 margin 合并
对于子元素间的 margin 合并：display: inline-block;
对于父元素和子元素之间的合并：
- 给父元素加 padding 或者 border。margin 能合并就是因为父元素和子元素的 margin 之间没有其他的东西，加了 border 或者 padding 就等于在父子的 margin 中间加了东西，因此就无法合并 margin 了。
- 给父元素加上
overflow: hidden;。 - 使用
dispaly：flex；。