CSS3 框大小(box-sizing)

使用CSS3框大小调整功能，您可以指定元素的有效宽度。

使用框大小(box-sizing)重新定义框宽度

默认情况下，元素的盒子可见/呈现在网页上的实际宽度或高度依赖于它width或height，padding和border属性值。例如，如果您对一个宽度为100%的<div>元素应用了一些内边距和边框，那么水平滚动条就会出现，如下面的示例所示。

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

这是Web设计人员长期面临的非常普遍的问题。但是，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;
}

如果看到此示例的输出，则会发现滚动条已消失。

使用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;
}