使用CSS3框大小调整功能,您可以指定元素的有效宽度。
默认情况下,元素的盒子可见/呈现在网页上的实际宽度或高度依赖于它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; }测试看看‹/›
如果看到此示例的输出,则会发现滚动条已消失。
注意:使用CSS box-sizing属性时,通过从指定的width和height属性中减去各边的边框和填充宽度,可以计算出内容区域的宽度和高度。
通过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; }测试看看‹/›