说清CSS盒模型

我们知道再CSS中盒模型作为基础的一个点，也是初入前端必须明白的一个点，才知道网页是如何布局的，那么到底盒模型是什么了？

1、从MDN上的文档说起

CSS 盒模型是 CSS 规范的一个模块，它定义了一个长方形的盒子，每个盒子拥有各自的内边距和外边距，并根据视觉格式化模型来对元素进行布局。

在一个文档中，每个元素都被表示为一个矩形的盒子。在CSS中，使用标准盒模型来定义这些矩形盒子的，每一个盒子都从内到外都有4个区域：content、padding、border、margin

这是在开发者工具下打开的一个盒模型界面

• 注：上图中最里面的1000*1916是内容区域(content)的长度和宽度

现在我们已经知道了一个元素在页面中是如何展示内容的，那么多个元素一起是如何布局的了，这里就有一个不得不说的话题：外边距合并

2、外边距合并

块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距，其大小是组合到其中的最大外边距，这种行为称为边距塌陷(margin collapsing)，在国内一般称为外边距合并。

发生外边距合并的三种基本情况：

• 相邻的兄弟元素

这个段落的下外边距被合并...
这个段落的上外边距被合并。

上面的外边距合并的效果可视化模型

不是 ”上面段落的下边距“ 与 ”下面段落的上边距“ 的 求和 ，而是两者中的较大者（在此示例中为30px）。

• 空块元素
  如果存在一个空的块级元素，其 border、padding、inline content、height
  、min-height 都不存在。那么此时它的上下边距中间将没有任何阻隔，此时它的上下外边距将会合并。

两个空块的叠加

如果这个外边距碰到另一个元素的外边距，它还会发生叠加：

空元素已经叠加的外边距碰到另一个元素的外边距，它还会发生叠加

• 块级父元素和子元素的叠加
  这个也直接上图，一目了源

元素的顶外边距与父元素的顶外边距发生叠加

以上三种情况都写完了，那么下面我们思考两个问题：如果是一个元素拥有的是负外边距，那么又当如何合并了？有时可能我们需要避免外边距合并，哪有该如何处理？

对于第一个问题，这个比较简单，其实我们稍微自己写一个例子测试就可以出来。

• demo-test

  
  

  

  

    shang
  
  

    hai
  

运行结果

这里我们测试可以知道：当有负边距存在时，合并后的外边距将是最大正边距加上最小负边距（即负边距中绝对值最大的一个）

第二个问题了，其实我们发生外边距合并只是在普通的文档流中才会发生，像行内框、浮动元素或绝对定位框之间的外边距并不会发生合并，这一系列的的总结出来就是BFC会阻止元素外边距合并，关于BFC我会再写一篇文章总结下。

3、CSS3盒子模型

前面我们已经讲过了标准的盒模型，这里在补充下CSS3中的一个有关盒模型的box-sizing属性

• 语法：box-sizing: content-box|border-box

在默认情况下box-sizing: content-box，在一个元素下添加这个属性也就是说表明它是标准的盒模型，一般情况下我们也不会去声明。

说到这里可能有人好奇了，难道还有其他的盒模型，这就要说到古老的IE了，在IE浏览器占据大额市场分量的时代，定义过一个IE的模型，但我们使用box-sizing: border-box这个属性的时候就是IE盒模型的特性了。它和标准盒模型最大的区别时它的宽/高=content width/height+padding+border，其实一般情况也使用的频率不是很高。