css box-sizing

1、定义和用法

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

2、content-box

如以下代码：

<span style="font-family:Comic Sans MS;font-size:14px;"><div id="divouter" style="border:10px solid blue;width:300px;height:300px;padding-left:100px;"> 
    </div></span>

div本身的宽与高是300，另外有一个内边框，这样div的宽带变为了400，在内部的内容偏移左边100个像素排列，整个div占宽420px，高300px

outerWidth = width +padding+border;

innerWidth = width+padding;

padding-left使上述div的宽度有多了100px
上例中outerWidth 为420px;,innerWidth为400,

如下图：

3、border-box

代码同上，整个div占居宽300px,高300px

outerwidth = width；

innerwidth = width-border;

模型图如下：