盒模型

2. CSS盒模型

2.1 说说盒模型

2.1.1 标准模型和 IE 模型的区别

1. W3C 标准盒模型：
   属性 width,height 只包含内容content，不包含 border 和 padding。
2. IE 盒模型：
   属性 width,height 包含 border 和 padding，指的是content+padding+border。

2.1.2 盒模型计算方式：box-sizing

盒模型默认的值是content-box, 新增的值是padding-box和border-box，几种盒模型计算元素宽高的区别如下：

1. content-box（默认）
   布局所占宽度 Width：
   Width = width + padding-left + padding-right + border-left + border-right
   布局所占高度 Height:
   Height = height + padding-top + padding-bottom + border-top + border-bottom

2. padding-box
   布局所占宽度 Width：
   Width = width(包含padding-left + padding-right) + border-top + border-bottom
   布局所占高度 Height:
   Height = height(包含padding-top + padding-bottom) + border-top + border-bottom

3. border-box
   布局所占宽度 Width：
   Width = width(包含padding-left + padding-right + border-left + border-right)
   布局所占高度 Height:
   Height = height(包含padding-top + padding-bottom + border-top + border-bottom)

4. margin 叠加
   当两个或更多个垂直边距相遇时，它们将形成一个外边距。这个外边距的高度等于两个发生叠加的外边距的高度中的较大者。但是注意只有普通文档流中块框的垂直外边距才会发生外边距叠加。行内框、浮动框或绝对定位框之间的外边距不会叠加。

   • 一般来说， 垂直外边距叠加有三种情况：
     元素自身叠加: 当元素没有内容（即空元素）、内边距、边框时，它的上下边距就相遇了，即会产生叠加（垂直方向）。当为元素添加内容、内边距、边框任何一项，就会取消叠加。
     相邻元素叠加 :相邻的两个元素，如果它们的上下边距相遇，即会产生叠加。
     父子元素叠加: 包含元素的外边距,隔着父元素的内边距和边框，当这两项都不存在的时候，父子元素垂直外边距相邻产生叠加,添加任何一项即会取消叠加。