CSS3盒模型计算方式

CSS3中增加了box-sizing的盒模型控制方式，使得我们可以更容易地控制盒模型

以下示例基于：

<style type="text/css">
.demoBox { 
    width: 100px;
    height: 100px;
    padding: 10px;
    margin: 10px;
    border: 2px solid #000;
    background: #36C;
}
</style>

<div class="demoBox" style="box-sizing: content-box"></div>
<div class="demoBox" style="-moz-box-sizing: padding-box"></div>
<div class="demoBox" style="box-sizing: border-box"></div>

1、content-box

content-box是默认的盒模型宽高计算方式，我们在CSS中指定的width和height的宽度，是内容的实际宽高，而盒子的总宽高(下面用WIDTH和HEIGHT表示)，是包括padding、border-width的，即：

WIDTH = width + padding-left + padding-right + border-left-width + border-right-width
HEIGHT = height + padding-top + padding-bottom + border-top-width + border-bottom-width

2、border-box

border-box是IE传统的盒模型（IE6以下版本及IE6~7的怪异模式），在这种情况下，

width = 内容 + padding-left + padding-right + border-left-width + border-right-width
height = 内容 + padding-top + padding-bottom + border-top-width + border-bottom-width

相应地：WIDTH = width，HEIGHT = height

3、padding-box

padding-box的宽高计算，只包含了padding和内容，不包含border，即：

width = 内容 + padding-left + padding-right
height = 内容 + padding-top + padding-bottom

相应地，有：

WIDTH = width + border-left-width + border-right-width
HEIGHT = height + border-top-width + border-bottom-width