盒模型我们可以把布局中的所有东西都想象成一个盒子，盒子里面有小盒子，小盒子里面有小盒子...所以布局里面的所有东西基于盒子。即使是一个很小的元素p也可以抽象成一个盒子。你现在脑子里有很多问题，没关系，继续读下去。以下是标准箱模型。(Imagesource)我们通常给元素添加的宽度和高度，实际上是在加宽和加高内容区域。当我们增加内外边距时，内容区域的大小不会改变，但整体大小会改变。如果我们为元素添加一个1像素的框架，那么我们所能看到的就是框架内部的内容（内边距+内容区域）。如果我们给元素添加背景，背景也会应用到这个区域，外边距是不可见的，它是用来分隔元素的。虽然边距是看不见的，但是当我们计算元素的总宽或总高时，我们需要加上边距。即：totalheight=margin-top+border+padding-top+height+padding-bottom+border+margin-bottomwidthtotal=margin-left+border+padding-left+width+padding-right+border+margin-right如果只在视觉上固定帧的大小，不添加边距进行计算。这里和《精通CSS 高级web标准解决方案（第二版）》有不同意见。（P39-P40，我觉得书上有错误）outermargins的mergingproblem什么是merging，意思就是outermargins会有重叠。取两者中最大的作为区间合并问题。合并问题的前提是有两个或两个以上的块元素在竖直方向以粗体文字相遇时，margin会被折叠分开普通流，两个或两个以上，块元素，竖直，很容易理解。这次相遇需要仔细解释。什么是相遇？简单来说，就是两种元素相遇。这次相遇是真正的相遇。如果有框架或其他障碍物，则不会发生折叠！具体分为：Ⅰ：父元素的上边距和第一个子元素的上边距大致是图中的效果：即父元素的margin-top与第一个子元素的margin-top相交第一个子元素，看代码：HTML:
