admin管理员组

文章数量:1794759

css3统一元素的宽和高

css3统一元素的宽和高

     通常我们设置元素的宽和高样式经常会出现一些问题,比如以下css的设置：

比如以下的代码：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob)</title> <style> .div1 { width: 300px; height: 100px; border: 1px solid blue; } .div2 { width: 300px; height: 100px; padding: 50px; border: 1px solid red; } </style> </head> <body> <div class="div1">这个是个较小的框 (width 为 300px ，height 为 100px)。</div> <br> <div class="div2">这个是个较大的框 (width 为 300px ，height 为 100px)。</div> </body> </html>

实际上我们期望的结果可能是这样:

 

但是实际上是这样的:

因为我们实际的宽度和高度是这样计算出来的:

width(宽) padding(内边距) border(边框) = 元素实际宽度

height(高) padding(内边距) border(边框) = 元素实际高度

 如果想要取得理想的效果可以针对每个div添加样式  box-sizing:border-box,这样width和height的值也就

包括border和padding的值了,即：

 

 

本文标签： 元素

版权声明：本文标题：css3统一元素的宽和高 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686968754a123600.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。