首页 > 代码库 > 学习CSS布局 - 盒模型
学习CSS布局 - 盒模型
盒模型
在我们讨论宽度的时候,我们应该讲下与它相关的另外一个重点知识:盒模型。
当你设置了元素的宽度,实际展现的元素却超出你的设置:
这是因为元素的边框和内边距会撑开元素。
看下面的例子,两个相同宽度的元素显示的实际宽度却不一样。
看看代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒模型</title> <style> .simple { width: 400px; height: 200px; border: 1px solid red; margin: 20px auto; } .fancy { width: 400px; height: 200px; border: 1px solid red; margin: 20px auto; padding: 10px; } </style> </head> <body> <div id="simple" class="simple"> 我小一些哦 </div> <div id="fancy" class="fancy"> 我比他大点 </div> <script> var oDiv1 = document.querySelector(‘#simple‘); console.log(oDiv1.offsetWidth, oDiv1.offsetHeight); var oDiv2 = document.querySelector(‘#fancy‘); console.log(oDiv2.offsetWidth, oDiv2.offsetHeight); </script> </body> </html>
根据输出来的结果,或者盒子模型就知道,offsetWidth就是自身宽度+border的宽度+padding的内边距,高度同理。
以前有一个代代相传的解决方案是通过数学计算。
CSS开发者需要用比他们实际想要的宽度小一点的宽度,需要减去内边距和边框的宽度。
值得庆幸地是你不需要再这么做了...
学习CSS布局 - 盒模型
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。