CSS3统一元素的宽和高
通常我们设置元素的宽和高样式经常会出现一些问题,比如以下css的设置:
比如以下的代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</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的值了,即:
作者:tuohaibei
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须在文章页面给出原文连接,否则保留追究法律责任的权利.
如果您觉得文章对您有帮助,可以点击文章右下角"推荐".您的鼓励是作者坚持原创和持续写作的最大动力!