CSS3 -- 盒模型（box-sizing）

一、盒模型（box model）

　　CSS中box model分兩種，一是W3C標準模型，二是IE的傳統模型（IE怪異模式）。

　　兩種模型都是對元素計算尺寸的模型，（具體說就是對元素的width,height,padding,border以及元素實際尺寸的計算關係）。

===》W3C的標準Box Model: 標準瀏覽器（Firefox,Safari,Chrome,Opera,IE6+）

  /*外盒尺寸計算（元素空間尺寸）*/
  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爲內容寬度）
 
===》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包含了元素內容寬度、邊框寬度、內距寬度)

　　標準瀏覽器（Firefox,Safari,Chrome,Opera,IE6+）和傳統瀏覽器(IE6如下版本瀏覽器)的Layout截圖：

總結、提示：

　　上圖中明顯能夠看出IE6如下版本瀏覽器的寬度包含了元素的padding,border值，換句話來講在IE6如下版本其內容真正的寬度是(width-padding-boder)。

　　用內外盒來講的話，W3C標準瀏覽器的內盒寬度等於IE6如下版本瀏覽器的外盒寬度。

　　目前瀏覽器大部分元素都是基於W3C標準的Box Model上，但對於form中的有部分元素仍是基於傳統的Box Model上，好比說input中的submit,reset,button和select等元素，這樣若是咱們給其設置border和padding他也只會往內延伸。

二、box-sizing 語法

box-sizing ： content-box || border-box || inherit

 ==》content-box：默認值，讓元素維持W3C的標準Box Model，Element Width/Height = border+padding+content width/height。

 ==》border-box：讓元素維持IE傳統的Box Model（IE6如下版本），也就是說元素的寬度/高度等於元素內容的寬度/高度。（從上面Box Model介紹可知，咱們這裏的content width/height包含了元素的border,padding,內容的width/height【此處的內容寬度/高度=width/height-border-padding】）。

三、box-sizing 兼容

　　box-sizing是CSS3的屬性，兼容以下：

　　　更全兼容狀況：

　　IE（ie8+支持）：-ms- ；

　　Mozilla：-moz-；

　　Webkit內核：-webkit-；

　　Presto內核：-o-。

四、box-sizing 用法

 -moz-box-sizing: content-box;
 -webkit-box-sizing: content-box;
 -o-box-sizing: content-box;
 -ms-box-sizing: content-box;
 box-sizing: content-box; 

五、Box-sizing統一form元素風格：http://www.w3cplus.com/content/css3-box-sizing

 

整理自：（W3CPlus）CSS3 Box-sizing