最好的设计师网站,网站后台更新栏目后 网站,logo在线设计生成器万动力,公众号怎么制作模版CSS3 框大小(box-sizing)使用CSS3框大小调整功能#xff0c;您可以指定元素的有效宽度。使用框大小(box-sizing)重新定义框宽度默认情况下#xff0c;元素的盒子可见/呈现在网页上的实际宽度或高度依赖于它width或height#xff0c;padding和border属性值。例如#xff0c;…CSS3 框大小(box-sizing)使用CSS3框大小调整功能您可以指定元素的有效宽度。使用框大小(box-sizing)重新定义框宽度默认情况下元素的盒子可见/呈现在网页上的实际宽度或高度依赖于它width或heightpadding和border属性值。例如如果您对一个宽度为100%的元素应用了一些内边距和边框那么水平滚动条就会出现如下面的示例所示。示例.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属性中减去各边的边框和填充宽度可以计算出内容区域的宽度和高度。使用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;}测试看看‹/›
