盒子模型 以及CSS的box-sizing属性。

　　盒子模型有两种 一种是 内容盒子模型 一种是边框盒子模型。

　　内容盒子模型（标准盒子模型）由width和height中指定的元素的尺寸不包括内边距和边框 仅是指的内容的实际尺寸；

网上搜索了两张配图不错 很直观。

边框盒子模型（IE6 的盒子模型）起源于IE的怪异模式中的一个bug。对元素指定的width和height 包括了内边距和边框的高度。

 

　　在CSS3中引进了 box-sizing属性，默认值为content-box（标准盒子模型）如果替换为border-box 浏览器会给该元素应用IE盒子模型。即width属性将包含边框的宽度以及内边距。当想以百分比形式设置元素的总体尺寸，又想以像素的单位制定边框和内边距时候，边框模型特别有用。

比如：我要为外部元素设置padding元素留白、添加一个内部元素设置border宽度为3px;padding:4px;使其填满外部元素的空间，于是设置内部元素的尺寸为100%

<div class="outdiv">
  <div class="innerdiv"></div>
</div.outdiv>

.outdiv{
  position:relative;
  left:40px;
  top:40px;
  width:200px;
  height:200px;
  padding:10px;
  background:red
}
.innerdiv{
  border:3px solid blue;
  padding:4px;
  width:100%;
  height:100%;
  background:green;
}

　　结果如下

这种结果是非常糟糕，元素的大小比与想要的结果要大了。于是给内部的div增加一个box-sizing:border-box属性，结果如下

 

 

边框模型在CSS3中的另一个可选方案可以使用calc来计算尺寸。width设置为100%-2*border-2*padding比如把CSS 设置为如下，也可以达到上述的效果Demo

.innerdiv{
  border:3px solid blue;
  padding:4px;
  width:calc(100% - 2 * 3px - 2 * 4px);
   height:calc(100% - 2 * 3px - 2 * 4px);
  background:green;
}

 

　　

(注意运算符用空格隔开）