boxmodel之前写过一篇文章讲如何解决CSSmarginoverlap的问题，后来发现本末倒置，正确的流程对于一个问题应该是先发现问题，分析问题，解决问题，所以在这篇文章中，我将讲解CSS的盒模型，什么是marginoverlap，为什么会出现marginoverlap，以及marginoverlap是如何计算的。透过现象看本质，达到掌握的目的。文章可能有点长。为了节省时间，大家可以根据自己掌握的情况浏览阅读。1.结构为了排版和定位（布局）文档树中的每个元素，浏览器会根据渲染模型，为每个元素生成四个嵌套的矩形框。它们是内容框、填充框、边框框和边距框。它们密不可分，在某些情况下会重叠。这是css规范中描述的盒子模型，它从CSS的角度来看一个元素渲染后的抽象形式，是元素本身不可或缺的一部分。注：padding、border和margin区域包括top、right、bottom、left四部分。如图所示（“LM”代表左边距，“RP”代表右边距，“TB”代表上边框……）。2.Boundaries以上四个区域（content,padding,border,margin）分别有自己的边界。具体来说，每个区域都有上、右、下、左四个边界。内容边界/内边界：内容边界包围由元素的宽度和高度确定的矩形。这个大小通常由元素的渲染内容决定。由这四个内容边框组成的矩形框就是内容框。元素的填充边框：paddingbordersurrounds围绕元素的填充区域，顾名思义，用背景色填充。如果填充宽度为零，则填充边框与内容边框重合。这四个paddingborder组成的矩形就是元素的paddingbox。borderborder:borderborder包围元素的边框区域。如果边框的宽度为零，则边框边框与填充边框重合。这四个borderborder组成的矩形就是元素的borderbox。marginborder:marginborder围绕着元素的margin区域，如果margin的宽度为零，则marginborder与border边框重合。这四个边距边框形成的矩形就是元素的边距框。3、一些小注意事项，如果你掌握了请无视（1）对于行内非替换元素（如span），verticalmargin不起作用（2）margin不适用于table类元素，如table-caption,table,inline-table,andtd,th,tr等（3）border-style的可用值有：'none'（无样式），'hidden'（隐藏），'dotted'（虚线）、'dashed'（虚线）、'solid'（实线）、'double'（双线）、'groove'（3D凹槽剖面）、'ridge'（3D吐出剖面）、'inset'（3D凹边轮廓），'outset'（3D凸边轮廓）。后四项很少用到，这里提一下。你可以尝试自己运行一下，看看它们之间的区别。marginoverlap也是我将在本文中重点关注的内容。collapsingmargins，即marginoverlap，是指最重要的是相邻两个或多个normalflow中块元素的垂直margin会合并为一个margin。边缘邻接可以归因于对于以下两点：这两个或多个边距没有被非空内容、padding、border或clear分隔开。这些边距都在正常的文档流中。请注意，如果它们没有分开，则元素的margin-top与正常流中第一个元素的margin-top相邻，并且只有当元素的高度为“auto”时，其margin-bottom才会与最后一个元素相邻元素在其正常流中与（非浮动元素等）的margin-bottom相邻。示例代码：
