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