盒模型是css的核心知识，属于那种不掌握好，在实际工作中就容易犯迷糊的知识。至于本篇文章，主要解决一个问题，那就是css盒模型的计算方法。至于别的知识，也算是自己回忆和复习一次。
关于盒模型的构成，算是前端的基础知识了。网络上关于这方面的知识也是多如牛毛。所以这儿我就用Chrome浏览器控制台的盒模型图。（毕竟最贴近实际开发环境）
可以看到盒模型由 margin , border , padding , content（中心部分0x0的那个框） 四部分组成。
如果要形象化的理解呢，我们举个栗子~
这儿有一个仓库，仓库里是各式各样的箱子。仓库代表网页，箱子代表独立的div。
立即学习“前端免费学习笔记（深入）”；
两个箱子之间的空隙，就是margin。
箱子当然有自己边框了，每个箱子边框的厚度不一。这个边框，就是border。厚度呢就是border的大小。
箱子里面当然也装着各式各样的货物，箱子里面所有的货物，就是content。
但是货物也有可能没把箱子堆满，那么箱子内除去货物的空白部分，就是padding了。
这就是我对盒模型在现实中的理解。
盒模型的宽度计算，不复杂但也不好玩。因为一个盒模型的宽度，不只是计算其content的宽度，还会加上元素的边框与内边距。
用个demo，就很好理解了。在demo中，两个div的宽度是一致的。(demo出处在底部)
.simple { width: 500px; margin: 20px auto;}.fancy { width: 500px; margin: 20px auto; padding: 50px; border-width: 10px;}
但实际情况，却是这样的:
这是因为盒模型计算宽度时，加上了padding和border的宽度。所以第二个元素看起来要比第一个元素大。
这样对于计算盒模型宽度是不利的，因为比较繁琐。于是后来人为了解决这个问题，在CSS3中给盒模型加入了新属性： box-sizing 。
box-sizing 共两个属性，一个是 content-box ，一个是 border-box 。
设置为 content-box 则盒模型宽度计算方法同CSS2.1，计算内边距和边框。所以这儿我们着重讲解 border-box 。
当设置一个盒模型为 box-sizing: border-box 时，这个盒子的内边距和边框都不会再增加它的宽度。
继续看第二个demo。在这儿，我们给所有盒模型统一设置 box-sizing: border-box 。
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}.simple { width: 500px; margin: 20px auto;}.fancy { width: 500px; margin: 20px auto; padding: 50px; border: solid blue 10px;}
那么，出来的效果会是这样的。
可以看到两个盒模型的宽度一致了。
这是因为之前设置的宽度，是元素的宽度。而内边距和边框在元素宽度外绘制。
而设置 border-box 时，内边距和边框都在设定的宽度内进行绘制。元素宽度需要由设定宽度减去内边距和边框得到。
怎么样，是不是很容易理解呢？至于高度，计算原理同上。这儿就不赘述啦。
算是个自己写网页时经常碰到的问题，那就是如果给一个元素设置 background 时，背景颜色的范围将包括内边距。
要说总结的话，这节应该是自己学的最轻松的一部分。之前都是盲点和难点，这里却只是似懂非懂。看了看文档就瞬间明白了。然后想了想，还是写篇博客出来，因为好记性不如烂笔头~
然后再放上参考链接，有兴趣多了解的同学，也可以点开看看。
前端路漫漫，且行且歌~
参考链接：
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
764
收藏
