CSS中的 box-sizing
屬性定義了 user agent
應該如何計算一個元素的總寬度和總高度。
box-sizing: border-box;
width: 100%;
border: solid #5B6DCD 10px;
padding: 5px;
在 CSS
盒子模型的默認定義裏,你對一個元素所設置的 width
與 height
只會應用到這個元素的內容區。如果這個元素有任何的 border
或 padding
,繪製到屏幕上時的盒子寬度和高度會加上設置的邊框和內邊距值。這意味着當你調整一個元素的寬度和高度時需要時刻注意到這個元素的邊框和內邊距。當我們實現響應式佈局時,這個特點尤其煩人。
box-sizing
屬性可以被用來調整這些表現:
content-box
是默認值。如果你設置一個元素的寬爲100px
,那麼這個元素的內容區會有100px
寬,並且任何邊框和內邊距的寬度都會被增加到最後繪製出來的元素寬度中。border-box
告訴瀏覽器:你想要設置的邊框和內邊距的值是包含在width
內的。也就是說,如果你將一個元素的width
設爲100px
,那麼這100px
會包含它的border
和padding
,內容區的實際寬度是**width減去(border+ padding)
**的值。大多數情況下,這使得我們更容易地設定一個元素的寬高。
譯者注: border-box
不包含margin
Note: 對於新的web
站點,你可能希望首先將box-sizing
設置爲border-box
,如下所示:
* { border-sizing: border-box; }
這使得處理元素大小的工作變得容易得多,並且通常消除了在佈局內容時可能遇到的許多陷阱。然而,在某些情況下,你應謹慎使用這個屬性。例如: 你正在編寫一個將由其他人使用的共享組件庫,如果他們網站的其餘部分沒有設置此值,他們可能會發現很難使用你的組件庫。
語法
box-sizing
屬性被指定爲下面列表中的關鍵字。
屬性值
content-box
默認值,標準盒子模型。 width
與 height
只包括內容的寬和高, 不包括邊框(border
),內邊距(padding
),外邊距(margin
)。注意: 內邊距、邊框和外邊距都在這個盒子的外部。 比如說,.box {width: 350px; border: 10px solid black;}
在瀏覽器中的渲染的實際寬度將是 370px
。
尺寸計算公式:
width
= 內容的寬度height
= 內容的高度
寬度和高度的計算值都不包含內容的邊框(border
)和內邊距(padding
)。
border-box
width
和 height
屬性包括內容,內邊距和邊框,但不包括外邊距。這是當文檔處於 Quirks
模式 時Internet Explorer
使用的盒模型。注意,填充和邊框將在盒子內 , 例如, .box {width: 350px; border: 10px solid black;}
導致在瀏覽器中呈現的寬度爲350px
的盒子。內容框不能爲負,並且被分配到0,使得不可能使用border-box
使元素消失。
尺寸計算公式:
width = border + padding + 內容的寬度
height = border + padding + 內容的高度
形式化語法
content-box | border-box
示例
本例顯示了不同的 box-sizing
值如何改變兩個原本相同的元素的渲染尺寸。
HTML
<div class="content-box">Content box</div>
<br>
CSS
div {
width: 160px;
height: 80px;
padding: 20px;
border: 8px solid red;
background: yellow;
}
.content-box {
box-sizing: content-box;
/* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
Content box width: 160px
Content box height: 80px */
}
.border-box {
box-sizing: border-box;
/* Total width: 160px
Total height: 80px
Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
}
結果如圖: