CSS 盒模型

盒子模型 Box Model

我们可以将html中的元素可以看作一个box，然后对这个box本身和box与周围box的放置进行设置。即，盒模型用于对元素进行布局，布局内容包括外边距margin、边框border、内边距padding和实际内容content四个部分。四个部分的排列方式如下图所示：

标准盒模型与怪异盒模型

现有两种盒子模型：W3C的标准盒模型和IE的怪异盒模型。
大部分浏览器都以W3C为标准，但是IE浏览器使用的是怪异盒模型。
怪异模式指的是浏览器即支持W3C标准，也保留原来的解析模式。

标准盒模型和怪异盒模型的区别主要在于元素width和height的指定范围不同。
在标准盒模式中 width = content.width;
height = content.height
而在怪异盒模式中 width = (content+padding+border).width;
height = (content+padding+border).height;

选择盒模型

默认选择

如果文档中含有，使用标准模式。
如果文档中没有规定 doctype 协议，那么不同的浏览器选择不同的模式。
IE6、IE7、IE默认使用怪异模式，而其他浏览器默认使用标准模式。

box-sizing指定选择

通过属性box-sizing可以设定盒子模型选用的模式。

• {box-sizing: content-box} width = content.width 标准模式
• {box-sizing: padding-box} width = (content + padding).width
• {box-sizing: border-box} width = (content + padding + border).width 怪异模式