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)