深入css布局（1）—— 盒模型

在css的发展历程中，有两种版本的盒模型，一个叫IE盒模型（又叫怪异盒模型），一个叫W3C标准盒模型，在早期的微软出的IE浏览器中采用的是自己的盒模型标准成为IE盒模型或者叫怪异盒模型(此模型只会出现在IE5.5及其更早的版本中。只要为文档设置一个DOCTYPE，就会使得IE遵循标准兼容模式的方式工作
)。

IE5.5及更早的版本使用的是IE盒模型，后来微软也慢慢转向了W3C的标准，在IE6以后支持了W3C标准盒模型。在我们现在的主流浏览器里面默认都是使用w3c标准盒模型。

1、css盒子模型概念

CSS css盒子模型 又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。

1.1标准盒子模型

image.png

图中最内部的框是元素的实际内容，也就是元素框，紧挨着元素框外部的是内边距padding，其次是边框（border），然后最外层是外边距（margin），整个构成了框模型。通常我们设置的背景显示区域，就是内容、内边距、边框这一块范围。而外边距margin是透明的，不会遮挡周边的其他元素。

元素框的总宽度 = 元素（element）的width + padding + margin +border；

元素框的总高度 = 元素（element）的height + padding +margin +border。

CSS中的宽（width）=内容（content）的宽

CSS中的高（height）=内容（content）的高

1.2 IE盒子模型

image.png

CSS中的宽（width）=内容（content）的宽+（border+padding）

CSS中的高（height）=内容（content）的高+（border+padding）

2、css 外边距合并（叠加）

两个上下方向相邻的元素框垂直相遇时，外边距会合并，合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值，如图：

image.png image.png

比较容易理解，所以在页面中有时候遇到实际情况是需要考虑这个因素的。当然外边距合并其实也有存在的意义，如下图：

image.png

需要注意的是：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

3、box-sizing属性介绍

box-sizing属性是用户界面属性里的一种，之所以介绍它，是因为这个属性跟盒子模型有关，而且在css reset中有可能会用到它。

box-sizing : content-box|border-box|inherit;

(1) content-box ,默认值，可以使设置的宽度和高度值应用到元素的内容框。盒子的width只包含内容。

即总宽度=margin+border+padding+width
　　
(2) border-box ,
设置的width值其实是除margin外的border+padding+element的总宽度。盒子的width包含border+padding+内容

即总宽度=margin+width
　
很多CSS框架，都会对盒子模型的计算方法进行简化。

(3) inherit , 规定应从父元素继承 box-sizing 属性的值

关于border-box的使用：
1 一个box宽度为100%，又想要两边有内间距，这时候用就比较好
2 全局设置 border-box 很好，首先它符合直觉，其次它可以省去一次又一次的加加减减，它还有一个关键作用——让有边框的盒子正常使用百分比宽度。