CSS3 框大小(box-sizing)

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

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

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

示例

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

測(cè)試看看?/?

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

示例

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

測(cè)試看看?/?

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

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

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

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

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

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

同樣，您可以使用此簡(jiǎn)單技術(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;
}