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-box	box-sizing:content-box;	DIV 設定的寬度僅為內容寬度，而內距與邊框額外加上去。
border-box	box-sizing:border-box;	DIV 設定的寬度就已經包含內容寬度、內距與邊框寬度。
inherit	box-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。

延伸閱讀