CSS3 盒子大小

使用 CSS3 盒子大小调整功能，您可以控制元素的有效宽度。

使用 Box-Sizing 重新定义盒子宽

默认情况下，网页上可见/呈现的元素框的实际宽度或高度取决于其 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;
}

如果你看到这个例子的输出，你会发现滚动条已经消失了。

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