盒子模型

我们把布局里面的所有东西都可以想象成一个盒子，盒子里面又装着小盒子，小盒子里面又装着小小盒子......

所以布局的万物基于盒子。即使一个小小的元素p，也可以把它抽象成为一个盒子。

你现在心里有很多疑问，没关系，接着看。

以下是标准的盒子模型。（）

我们平常给元素加上的width，height实际上就是给内容区域加宽和高。我们增加内外边距的时候不改变内容区域的大小，却会改变整体的大小。如果我们为元素加一个1像素的框的话，那么我们能看见的只是框里面的东西（内边距+内容区域），如果在元素上添加背景，背景也会应用于这一区域，而外边距是不可见的，它是用来分隔各个元素。

虽然外边距是不可见的，但是我们算元素的总宽度或者总高度的时候，要加上外边距。

即：

height总=margin-top+border+padding-top+height+padding-bottom+border+margin-bottom

width总=margin-left+border+padding-left+width+padding-right+border+margin-right

如果只在视觉上固定框的大小不用加入margin进行计算。这里和《精通CSS 高级web标准解决方案（第二版）》有不同的意见。（P39-P40，我认为书中出错）

外边距的合并问题

什么是合并

就是外边距中会有叠加的情况，取两者中最大的一个作为间隔

合并问题的前提是

处于普通流两个或多个块元素垂直方向上相遇加粗文字，会造成的margin折叠

除去普通流、两个或多个、块元素、垂直很好理解之外

这个相遇要好好解释一下了，什么算相遇呢？

简单的来说，无非就是就是说两个元素碰到了一起。这个相遇就是真真正正的遇到了，如果有边框等阻挡，是不会发生折叠的！

具体的，分为：

Ⅰ：父元素的上外边距和第一个子元素的上外边距

大概就是图片中的效果：

也就是父元素的margin-top 和第一个子元素的margin-top相遇，

看代码：

HTML:
        
     
    
CSS:/*为了效果更加明显，为body添加背景颜色*/body{    background-color:#ccc;}.father{    background-color:blue;    height:100px;    width:100px;    margin-top:20px;}.son{    background-color:red;    height:20px;    width:20px;    margin-top:20px;}

效果图:

可以看出来红色方块原本应该在蓝色方块的下方20px处，然而却合并了！

这种合并有时候是一种便利，而在有些情况却成为了不知何处的bug。所以在后面会讲怎么消除这种浮动。

Ⅱ：父元素的下外边距和最后一个子元素的下外边距

也就是父元素的margin-bottom与最后一个子元素的margin-bottom相遇发生的重叠。

与上一个类似，所以不再阐述。

Ⅲ：相邻兄弟姐妹元素

相邻兄弟就是，相邻的两个元素margin-top和margin-bottom发生的合并。

外边距为40px的情况：


    
    
.block1 {    background-color:red;    height:50px;    width:50px;    margin-bottom:20px;}.block2 {    background-color:blue;    height:50px;    width:50px;    margin-top:20px;}