css3 盒模型

0，前言

在css2.1 之前，我们都熟知的两种盒模型，一种是w3c标准盒模型，另外一种是怪异模式下的盒模型。在css3之前我们一直使用的是标准盒模型，但是标准盒模型的宽度总是需要小心的去使用，稍有不甚，有会带来混乱。css3让我们之前了解的怪异模式能够很好的在页面中使用，下面来了解下上面提到的w3c标准盒模型和怪异模式下的盒模型。

div {
		width: 200px;
		height: 100px;
		padding: 20px;
		border:30px solid blue; 
		margin: 10px;
		background: red;
	} 

下面来看看，上面的代码和标准盒模型和怪异模式下的盒模型表现形式有什么不同。

1，w3c标准盒模型

在网页中，每一个元素都是一个盒模型，我们称为盒子，要想写出好的网页，就需要去了解盒子是怎么组成的，达到心中有数的境界。

官方定义：http://www.w3school.com.cn/css/css_boxmodel.asp

一个标准的盒子是由 内容+内边距+边框+外边距，这里的内、外边距四边都是有的，看你怎么去设定了，而我们在样式中使用的width 指的盒子的内容，内边距和边框的修改都会改变整个元素的大小。background 背景是由 内容 + 内边距 构成的，下面看一个图

这是上面那张图的盒模型，加上外边距的话，整体宽度是 320，整体高度是220

这里的 200X100 是样式中声明的宽度和高，也就是我们的内容，接下来是内边距，内容盒内边距组成的部分就是红色背景的部分，接下来就是 边框 30 ，外边距10 。

width = 内容 + 内边距 + 边框

标准盒模型的缺点就是，一个元素的整体宽和高，要根据内、外边距、边框的改变去调整内容的宽高，也就是样式中我们所使用的宽、高。

2，怪异模式下盒模型

怪异模式则是使用浏览器自己的方式解析执行代码，因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。浏览器解析时到底使用标准模式还是怪异模 式，与你网页中的DTD声明直接相关，DTD声明定义了标准文档的类型（标准模式解析）文档类型，会使浏览器使用相应的方式加载网页并显示，忽略DTD声 明,将使网页进入怪异模式(quirks mode)。

怪异模式IE8以下独有的。

简单的说，文档声明的正确与否决定了，浏览器解析模式，是否使用怪异模式，即错误的文档声明会进入怪异模式

那我们现在故意写错文档声明，进入怪异模式下，探个究竟：

怪异模式下：width = 内容 + 内边距(两边的) + 边框 ，高度是不可预订的（至少看起来是这样的）

有没有发现什么，怪异模式下的盒子，不必担心我们对内边距和边框的修改来改变整体元素的宽度，而导致页面混乱，但是它的缺点是只在IE8 以下，我们不可能编写页面时使用这种模式，因为我们要兼容大多数浏览器。况且它的高度还是不可预订的。

警告：了解即可，切勿使用

3，CSS3 盒模型

现在我们来认识下css3中的盒模型属性 box-sizing ,它有三个属性

content-box 默认值，维持w3c 标准盒子

border-box 和IE怪异模式下相同，盒子的宽度 = 内容宽度+ 内边距 + 边框

inherit 继承父元素的盒模型模式

这里主要介绍border-box 这个值，虽然和怪异模式下很像，但还是有区别的，就是它的高度 等于height，它可以广泛的去使用，因为它是标准哦，重要的是它支持 IE8 以上浏览器、以及其他浏览器

但是在IE下面使用的时候，一定不要进入怪异模式，使用 border-box 即可，如果进入怪异模式，即使使用 border-box ，也是没有效果的，这个是我不小心误入的。

在正常模式下，IE8 下设置 box-sizing: border-box; 完美的使 width = 内容 + 内边距 + 边框； height = 内容 + 内边距 + 边框; 

上面是 border-box 的兼容情况（是不是发现可以大胆的使用了），附上地址 http://caniuse.com/#search=box-sizing

来自为知笔记(Wiz)