css3中box-sizing屬性用法詳解-content-box-padding-box-border-box

手機頁面多列不計算Border的方法

%borderbox{
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
}

 

 

box-sizing屬性概述

box-sizing的CSS屬性是用來改變默認的CSS框模型，用於計算元素的寬度和高度。它可以使用這個屬性來模擬瀏覽器的行為不正確支持CSS盒模型的規范。

說到 IE 的 bug，在 IE6以前的版本中，IE對盒模型的解析出現一些問題，跟其它瀏覽器不同，將 border 與 padding 都包含在 width 之內。而另外一些瀏覽器則與它相反，是不包括border和padding的。

在我們開發的過程中會發現，有時候，如果對頁面中的大區域進行設置時，將border、padding計算到width和height之內，反而更靈活。但W3C的 CSS2.1規范卻規定了他們並不能被包含其中。考慮到這個問題，css3中引入了一個新的屬性：box-sizing，它具有“content-box”和”border-box“兩個值。

box-sizing:content-box

當我們設置 box-sizing: content-box; 時，瀏覽器對盒模型的解釋遵從我們之前認識到的 W3C 標准，當它定義width和height時，它的寬度不包括border和padding。

box-sizing:border-box

當我們設置box-sizing: border-box; 時，瀏覽器對盒模型的解釋與 IE6之前的版本相同，當它定義width和height時，border和padding則是被包含在寬高之內的。內容的寬和高可以通過定義的“width”和 “height”減去相應方向的“padding”和“border”的寬度得到。內容的寬和高必須保證不能為負，必要時將自動增大該元素border box的尺寸以使其內容的寬或高最小為0。

box-sizing屬性

• 初始值：content-box
• 適用於：接受的所有元素的寬度或高度
• 繼承：無
• 媒體：visual
• 指定的：as specified
• 動畫：no
• 規范秩序：獨特的無歧義的正式語法定義的順序

box-sizing屬性語法

1. Formal syntax: content-box | padding-box | border-box

1. box-sizing: content-box
2. box-sizing: padding-box
3. box-sizing: border-box
4. box-sizing: inherit

box-sizing屬性取值

content-box

這是默認樣式指定CSS標准。測量winth和height屬性只包括的內容，但不是border, margin, 或者 padding。

padding-box

winth和height屬性包括padding的大小，不包括border和margin

border-box

winth和height屬性包括padding和border，但不是margin。這是盒模型的文檔時，Internet Explorer使用Quirks模式。

box-sizing屬性示例

1. /* support Firefox, WebKit, Opera and IE8+ */
3. .example {
4.   -moz-box-sizing: border-box;
5.        box-sizing: border-box;
6. }