Box-sizing 介紹
Last updated
Last updated
content-box
這是根據 CSS 標準的起始值和預設值。 width
與 height
只包括內容本身的寬和高, 不包括邊框(border)、內邊距(padding)、外邊距(margin)。注意:內邊距、邊框和外邊距都在這個盒子的外部。例如,如果 .box {width: 350px}; 而且 {border: 10px solid black;}
,那麼在瀏覽器中的渲染該容器的實際寬度將是370px,;
簡單來說,尺寸計算公式:width = 內容的寬度,height = 內容的高度。寬度和高度都不包含內容的邊框(border)和內邊距(padding)。
width
和 height
屬性包括內容(content),內邊距(padding)和邊框(border),但不包括外邊距(margin)。這是當文檔處於 Quirks 模式時 Internet Explorer 所使用的盒模型。注意,內邊距和邊框都將在盒子內 ,例如,.box {width: 350px; border: 10px solid black;}
,渲染出的容器寬度會固定在 350px,而內容(content)的寬度就會變成 330px, 因為邊框(border)佔了20px。內容框不能為負,並且進位到 0,使得不可能使用 border-box 使元素消失。
這裡的維度計算為:
width = border + padding + 內容的 width,
height = border + padding + 內容的 height。
當你設定一個元素樣式為 box-sizing: border-box;
,這個元素的內距和邊框將不會增加元素本身的寬度。
這樣可以確保所有元素的寬度都可以用比較直觀的方式來定義。
因為 box-sizing
算是個比較新的屬性,所以你還應該還是要加上我之前在例子中使用的 -webkit-
和 -moz-
前綴(Prefixes),這樣才能啟用特定瀏覽器實驗中的 CSS 特性。請記得該屬性從 IE8+ 之後就開始支援。