盒子模型 以及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;
}

 

　　

(注意運算符用空格隔開）