box-sizing是CSS3的box属性之一。一说到CSS的盒模型（Box model）我想很多人都会比较烦，特别是对于新手，然而这个Box model又是我们CSS运用中比较重要的一个属性。那么CSS3的Box-sizing跟盒模型有什么关系呢？第一句话就说了，Box-sizing是CSS3的Box属性之一，那他当然也遵循CSS的Box model原理，为了能更好的学习和理解这个Box-sizing属性，我们有必要先了解一下CSS中Box model的原理。

CSS中Box model是分为两种，第一种是W3C的标准模型，另一种是IE的传统模型，他们相同之处都是对元素计算尺寸的模型，具体说就是对元素的width,height,padding,border以及元素实际尺寸的计算关系；他们不同之处呢？两者的计算方法不一至：

1、W3C的标准Box Model:

  /*外盒尺寸计算（元素空间尺寸）*/
  Element空间高度 = content height + padding + border + margin
  Element 空间宽度 = content width + padding + border + margin
  /*内盒尺寸计算（元素大小）*/
  Element Height = content height + padding + border （Height为内容高度）
  Element Width = content width + padding + border （Width为内容宽度）

2、IE)传统下Box Model（IE6以下，不含IE6版本或“QuirksMode下IE5.5+”）:

  /*外盒尺寸计算（元素空间尺寸）*/
  Element空间高度 = content Height + margin (Height包含了元素内容宽度，边框宽度，内距宽度)
  Element空间宽度 = content Width + margin (Width包含了元素内容宽度、边框宽度、内距宽度)
  /*内盒尺寸计算（元素大小）*/
  Element Height = content Height(Height包含了元素内容宽度，边框宽度，内距宽度)
  Element Width = content Width(Width包含了元素内容宽度、边框宽度、内距宽度)

其实原则上来说Box Model是分得很细的，我们这里主要分了两个比较明显的地方，就是外盒模型和内合模型，如上面计算公式所示（后面我将会详细介绍一下CSS中的Box Model）。这样说大家可能还不太好理解，下面我们一起来看一个实际的例子，比如说现在有一个叫boxtest的Div，其具有下面一个属性

 .boxtest {
    border: 20px solid;
    padding: 30px;
    margin: 30px;
    background: #ffc;
    width: 300px;
 }

我们先来看一下W3C标准浏览器（Firefox,Safari,Chrome,Opera,IE6+）和传统浏览器(IE6以下版本浏览器)的Layout截图

上图中明显可以看出IE6以下版本浏览器的宽度包含了元素的padding,border值，换句话来说在IE6以下版本其内容真正的宽度是(width-padding-boder)。用内外盒来说的话，W3C标准浏览器的内盒宽度等于IE6以下版本浏览器的外盒宽度。这样下来我们就需要在IE6下的版本写Hack统一其内外盒的宽度，关于如何处理这样的兼容问题，我在这里不多说，感兴趣的朋友可以点击这里。那么浏览器发展到今天，世面上用IE6以下的浏览器应该所占比例相当的少，但不排除没有人不在用。所以目前浏览器大部分元素都是基于W3C标准的Box Model上，但对于form中的有部分元素还是基于传统的Box Model上，比如说input中的submit,reset,button和select等元素，这样如果我们给其设置border和padding他也只会往内延伸。关于如何处理form中的这些元素，今日将会借此机会和大定一起探讨一下，那么现在我们还是先回到今天的正题上。

上面简单让大家对CSS的Box Model有了一个初步的概念（如果想了解更多的Box Model相关知识，可以点击W3C Box Model，另外在这里有中文版）。下面开始我们今天的主题——CSS3的Box-sizing。