CSS盒模型理解
CSS 盒模型是CSS最核心的基础知识，理解了这个重要的概念才能更好的排版，才能对页面更好的布局。
1. CSS盒模型模型概念
CSS盒模型包括content（元素内容）、padding(内边距)、border(边框）和margin(外边距)。
CSS盒模型有两种： content-box ：内容盒 - 内容就是盒子的边界 border-box ：边框盒 - 边框才是盒子的边界
公式： content-box width = 内容宽度 border-box width = 内容宽度 + padding + border
对比如下
内容区域 content area ，由内容边界限制，容纳着元素的“真实”内容，例如文本、图像或是视频。
内边距区域 padding area ，由内边距边界限制，扩展自内容，负责延伸内容区域的背景，填充内容与边框的间距。
边框区域 border area ，由边框边界限制，扩展自内边距，是容纳边框的区域。
外边距区域 margin area 由外边距边界限制，用空白扩展边框，以分开相邻的元素。
外边距合并
两个相邻元素在上下方向的外边距可能会合并为单个边距。而合并后的边距以最大值为准。
-
哪些情况会合并
父子合并 —— 即无隔开情况下（无border、padding、行内内容、清除浮动等）
兄弟合并 —— 即同层相邻元素之间外边距重叠
-
怎么阻止合并
兄弟合并是符合预期的，但可以用display:inline-block;消除（width=100%）
父子合并可以：给父元素添加padding/border；添加overflow:hidden；用display:flex;
注意： 外边距合并只发生在垂直方向，水平方向不合并！
