鲁达 成长是一辈子的事儿！大家好！我是时问新。分享前端、Python等技术，以及个人成长路上的那些事儿。
盒子模型是CSS中一个非常重要的知识点，盒子模型相当于组成一个个页面的 砖头，所以盒子模型是CSS中的重中之重。
在CSS中，所有的HTML标签都可以看做是矩形的盒子（长方形盒子），盒子模型是由border、padding、width、height四部分构成。
一个页面局可以看做是很多盒子模型构成的。
上图就是一个盒子模型的各部分结构，任何一个HTML标签都可以看做是一个盒子模型。
在盒子模型中，首先最外面是一个边框，边框里面是内容，有时候盒子的内容和边框并不是紧紧挨着的，而是隔着一定的距离，边框的内壁到内容之间的距离就是padding，padding也叫内边距。
就像你网购了一个东西，是用纸盒子包装的，纸盒的内壁和你这个东西之间一般是有空隙的，padding就可以看做是盒子和东西之间的空隙的大小。
而我们一直给HTML标签设置的width和height，实际上是内容的宽度和高度，而不是盒子总的宽度和高度。
盒子的总宽度=左右border+左右padding+width
盒子的总高度=上下border+上下padding+height
接下来，我在vscode和浏览器中演示一下盒子模型。我创建了一个新的页面叫"盒子模型.html"，代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子模型</title> <style> .box { width: 300px; height: 200px; color:#fff; font-size: 20px; background-color: red; } </style> </head> <body> <div class="box"> 深爱总迟解，将爱却晚秋。 </div> </body> </html>我创建了一个类名为box的div，我给这个div设置了width为300px，和height为200px，它们是这个div中内容的宽度和高度，并不是这个div的总宽度和总高度。
在浏览器中效果如下：
我们看到红色背景区域就是这个div盒子的内容区域，文字是贴着红色的边显示的。
现在我给这个div添加一个border和padding的属性，代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子模型</title> <style> .box { width: 300px; height: 200px; color:#fff; font-size: 20px; background-color: red; /* 添加边框，快捷键bd ,边框的宽度20像素，颜色是金色*/ border: 20px solid gold; /* 添加内边距为20像素*/ padding: 20px; } </style> </head> <body> <div class="box"> 深爱总迟解，将爱却晚秋。 </div> </body> </html>
我给这个div添加了一个金色的边框，宽度是20像素，又添加了内边距为20像素，效果如下：
此时，我们就看到外面多了一个金色的边框，文字和边框之间具有了一定的空隙了。
此时，这个div的内容的宽度还是300px，高度还是200px，
盒子的总宽度=20像素的左边框+20像素的右边框+20像素的左内边距+20像素的右内边距+内容的宽度300像素=380px
盒子的总高度=20像素的上边框+20像素的下边框+20像素的上内边距+20像素的下内边距+内容的高度200像素=280px
现在，我在浏览器页面的这个盒子上点击右键，然后单击"检查"，在弹出的调试界面上，就能看到这个盒子的样式面板，我把样式面板拉到最下面，就会看到这个盒子的模型图：
在这个盒子的模型图上，就能看到margin（盒子的外边距，我们没设置，所以没有数值）、border宽度为20像素，内边距padding上下左右都是20像素，内容宽高为300*200。
当咱们把鼠标滑到调试面板的盒子模型图上的某一个部分时，页面上的盒子的相应部分也会闪烁。比如把鼠标滑到盒子模型图上的padding上时，页面上的padding区域就会变一个颜色，让你知道这一块是padding。
总结：任何一个HTML标签都可以看做一个"盒子"，盒子模型包括这个标签的上下左右四个边框、上下左右四个内边距、内容的宽度width和内容的高度height。
感谢阅读！知识总结不易，请点个赞或转发鼓励一下呗！想系统性学习前端的小伙伴可以关注我！
温馨提示：我在头条关于前端的图文，都是成体系的，如果是没接触过前端，对前端感兴趣、想要学习前端的小伙伴，要按顺序从第一节去看，更重要的是要动手实践。