CSS3 框大小

使用 CSS3 框大小调整功能,你可以控制元素的有效宽度。

用盒子尺寸重新定义盒子宽度

默认情况下,元素的盒子可见/呈现在网页上的实际宽度或高度依赖于它的 widthheightpaddingborder 属性。例如,如果你在一个有 100% width<div> 元素上应用 paddingborder,水平滚动条就会出现,你可以在下面的例子中看到。

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

这是网页设计师长期面临的常见问题。但是,CSS3 引入了 box-sizing 属性来解决这个问题,并使 CSS 布局更加简单直观。该 box-sizing 属性更改默认的 CSS 框模型,使得元素上的任何 paddingborder 指定布局并在内容区域内绘制,以便元素的渲染宽度和高度等于指定的 CSS widthheight 属性。

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

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

注意: 使用 CSS box-sizing 属性时,通过从指定 widthheight 属性中减去各边的宽度 borderpadding 宽度来计算内容区域的最终宽度和高度。

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