如何计算CSS盒模型的宽和高的

　　我们在布局网页时候经常会遇到网页的宽度和高度超出预算，那是因为CSS盒模型的宽度和高度跟我们理解的物体宽高度是不一样的，那么我们要如何计算CSS盒模型的宽和高呢?

　　#test{margin:10px;padding:10px;width:100px;height:100px;}

　　如上一段的代码，很多时候我们会把它所占的位置计算成width:120px，height:120px，因为在正常的理解下，padding是内边距，应该是包括在width里面的，而margin是外边距，所以width=margin-left margin-right width，但是浏览器对于CSS盒模型的解释却并非如此，所以最终我们会发现布局出来的网页宽度与高度都会超出我们预期的计算，最后造成显示上的错位。

　　其实不然，对于test所占的位置的真正计算应该是width=margin-left margin-right padding-left padding-right width，也就是宽度真正所占的大小应该是内边距 外边距 宽度本身，也就是说test真正的大小应该是140px才对。高度的计算与宽度的计算是一样的。

　　而如果给test加上边框的话，这个宽度与高度的算法还应该加上边框的大小。

　　#test{margin:10px;padding:10px;border:5px;width:100px;height:100px;}

　　这里的test的宽度就应该是外边框 内边框 边框 宽度本身，所以test的width是 150px。

　　如下图所示，width与height真正所占的位置并不是它本身的那一小块，而应该是一直到最外面深蓝色的那个层为止。

　　以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流，谢谢大家对爱站技术频道的支持!

原文链接:https://js.aizhan.com/web_authoring/css/5827.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有