CSS3 框大小

使用 CSS3 框大小調整功能，你可以控制元素的有效寬度。

用盒子尺寸重新定義盒子寬度

預設情況下，元素的盒子可見/呈現在網頁上的實際寬度或高度依賴於它的 width 或 height ，padding 和 border 屬性。例如，如果你在一個有 100% width 的 <div> 元素上應用 padding 和 border，水平滾動條就會出現，你可以在下面的例子中看到。

.box {
    width: 100%;
    padding: 20px;
    border: 5px solid #f08080;
} 

這是網頁設計師長期面臨的常見問題。但是，CSS3 引入了 box-sizing 屬性來解決這個問題，並使 CSS 佈局更加簡單直觀。該 box-sizing 屬性更改預設的 CSS 框模型，使得元素上的任何 padding 或 border 指定佈局並在內容區域內繪製，以便元素的渲染寬度和高度等於指定的 CSS width 和 height 屬性。

.box {
    width: 100%;
    padding: 20px;
    border: 5px solid #f08080;
    box-sizing: border-box;
} 

如果你看到此示例的輸出，你會發現滾動條已消失。

注意： 使用 CSS box-sizing 屬性時，通過從指定 width 和 height 屬性中減去各邊的寬度 border 和 padding 寬度來計算內容區域的最終寬度和高度。

使用 Box-Sizing 建立佈局

使用 CSS box-sizing 屬性建立使用百分比的多列布局變得非常簡單。現在，在新增填充或邊框時，你不必擔心元素框的最終大小。

以下示例將建立一個兩列布局，其中每列具有相等的寬度，並使用 float 屬性並排放置。

.box {
    width: 50%;
    padding: 20px;
    background: #f2f2f2;
    float: left;
    box-sizing: border-box;
} 

同樣，你可以使用這種簡單的技術建立更復雜的佈局。

.box {
    width: 30%;
    padding: 20px;
    margin-left: 5%;
    background: #f2f2f2;
    float: left;
    box-sizing: border-box;
}
.box:first-child {
    margin-left: 0;
}