css3框大小box-sizing – CSS3高级教程

上一章CSS3高级教程请查看：css3多栏布局

使用CSS3框大小box-sizing的功能，你可以控制元素的有效宽度。

使用Box-sizing属性重新定义Box宽度

默认情况下，元素在网页上可见/呈现的框的实际宽度或高度取决于它的宽度或高度、填充和边框属性。例如，如果你对一个宽度为100%的<div>元素应用了一些内边距和边框，那么水平滚动条就会出现，如下面的示例所示。

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

这是网页设计师长期以来面临的一个非常普遍的问题。但是，CSS3引入了box-sizing属性来解决这个问题，使CSS布局更加简单和直观。box-sizing属性改变默认CSS盒模型的方式，任何填充padding或边界border上指定的元素布局和内容区域内部，所以呈现元素的宽度和高度等于CSS指定宽度和高度属性。

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

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

注意: 当使用CSS box-sizing属性时，内容区域的结果宽度和高度是通过从指定的宽度和高度属性中减去各自边的边框和填充宽度来计算的。

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