CSS3 box-sizing 屬性

CSS3 box-sizing 屬性的功能是用來調整區塊的內距與邊框計算方式,預設的 DIV 區塊的邊框最外的寬度,會因為內距 padding 的值以及邊框 border 的粗細而有所影響,常見的情況是設計師調整了 padding 或邊框的粗細,導致整個 DIV 區塊的寬度改變,輕則影響到美觀,重則影響到整個網頁的排版,有了 CSS3 box-sizing 屬性,網頁設計師可以自己控制 DIV 區塊邊框的計算方式,改善寬度跑掉的問題。

CSS3 box-sizing 屬性語法
box-sizing: 設定値;
CSS3 box-sizing 屬性的設定値可以有三種,分別是 content-box, border-box, inherit,整理於下表。

CSS3 box-sizing 屬性可設定値
參數值語法說明
content-boxbox-sizing:content-box;
DIV 設定的寬度僅為內容寬度,而內距與邊框額外加上去。
border-boxbox-sizing:border-box;
DIV 設定的寬度就已經包含內容寬度、內距與邊框寬度。
inheritbox-sizing:inherit;
繼承至父層的 broder-sizing 設定値。
由於 box-sizing 是 CSS3 的新功能,各家瀏覽器的支援程度不一,所以我們必須使用前綴(Prefixes)來提醒瀏覽器要正確顯示 box-sizing 屬性的功能,例如 Firefox 就使用 -moz- 的前綴、Safari 系列就使用 -webkit- 的前綴,這在範例中可以看到。

CSS3 box-sizing 屬性範例
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
#container{
width:300px;
border:5px blue solid;
margin-bottom:20px;
}
#div_a{
box-sizing:content-box;
-moz-box-sizing:content-box; /* Firefox */
-webkit-box-sizing:content-box; /* Safari */
width:300px;
border:5px orange solid;
padding:5px;
}
#div_b{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:300px;
border:5px orange solid;
padding:5px;
}
</style>
</head>
<body>
<div id="container">
    <div id="div_a">這是使用 box-sizing:content-box; 的效果</div>
</div>
<div id="container">
    <div id="div_b">這是使用 box-sizing:border-box; 的效果</div>
</div>
</body>
</html>
範例的輸出結果
這是使用 box-sizing:content-box; 的效果
這是使用 box-sizing:border-box; 的效果
範例總共有兩個設定了 box-sizing 的橘色 DIV 區塊,且外圍都用一個寬度為 300px 的藍色 DIV 區塊包起來,第一個橘色的 DIV 區塊因為使用了「box-sizing:content-box;」,所以 padding 所占用的 5px 以及邊框所占用的 5px 分別在左右兩邊加了上去,最後橘色的 DIV 區塊總寬度就變成 320px,因此超出了藍色 DIV 區塊的範圍。

第二個橘色 DIV 區塊則使用了「box-sizing:border-box;」,所以 DIV 的總寬度包含了內容寬度、內距(padding)占用的寬度以及邊框所占用的寬度,換句話說,橘色 DIV 區塊的總寬度依然是 300px,不會超出藍色 DIV 區塊的範圍。

備註:藍色 DIV 區塊邊框內的寬度剛好是 300px。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012