CSS3 框大小(box-sizing)

使用CSS3框大小調(diào)整功能，您可以指定元素的有效寬度。

使用框大小(box-sizing)重新定義框?qū)挾?/h2>

默認情況下，元素的盒子可見/呈現(xiàn)在網(wǎng)頁上的實際寬度或高度依賴于它width或height，padding和border屬性值。例如，如果您對一個寬度為100%的<div>元素應(yīng)用了一些內(nèi)邊距和邊框，那么水平滾動條就會出現(xiàn)，如下面的示例所示。

示例

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

測試看看?/?

這是Web設(shè)計人員長期面臨的非常普遍的問題。但是，CSS3引入了box-sizing屬性來解決此問題，并使CSS布局更加簡單直觀。該box-sizing屬性以如下方式更改默認CSS框模型，即將元素上的任何元素padding或border指定的元素布局并繪制在內(nèi)容區(qū)域內(nèi)，以使元素的渲染寬度和高度等于指定的CSS width和height屬性。

示例

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

測試看看?/?

如果看到此示例的輸出，則會發(fā)現(xiàn)滾動條已消失。

注意：使用CSS box-sizing屬性時，通過從指定的width和height屬性中減去各邊的邊框和填充寬度，可以計算出內(nèi)容區(qū)域的寬度和高度。

使用Box-Sizing創(chuàng)建布局

通過CSS box-sizing屬性，使用百分比創(chuàng)建多列布局變得非常簡單?，F(xiàn)在，您不必擔(dān)心元素框的最終大小，而無需在其上添加邊框或邊框。

下面的示例將創(chuàng)建一個兩列布局，其中每列具有相等的寬度，并使用float屬性并排放置。

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

同樣，您可以使用此簡單技術(shù)創(chuàng)建更復(fù)雜的布局。

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