【JS】--css盒子模型

what

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。关于思维模式小编这里的理解就是将我们计算机中的事物寄托于实际物品中，从而更简单地认识计算机的事物，这种思维方式就是我们的思维模型。资历尚浅，一点认识，大家有其他的简介可以在评论中留言。

特点

盒子模型主要具备如下几个属性：内容(content)、填充(padding)、边框(border)、边界(margin)。它们的具体关系如下图：



看到上面的这张图片我们就能很好地将盒子模型与我们平时使用的盒子联系起来了。我们平时使用的盒子也会有如下几个属性：外边距（margin）、边框（border）、内边距（padding）、内容（content）

对比

1、生活中的盒子：

（1）内容（CONTENT）就是盒子里装的东西；

（2）填充(PADDING)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；

（3）边框(BORDER)就是盒子本身了；

（4）边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。

2、css盒子模型

（1）内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的；

（2）填充只有宽度属性 ；

（3）边框：每个HTML标记都可看作一个盒子；

（4）边界就是指不同HTML边际之间的距离。

总结

我们的网页就是由许许多多的HTML标签组合而成的，所以一个网页就可以看成是由许许多多不同的盒子组合而成的，所以css盒子模型是我们网页制作过程中必不可少的基础东西。目前只是最基本的了解，在不断接触项目的过程中逐渐深入学习才能做出更好地网页，同时只有对一个东西熟悉了，才能提高自己的学习和工作效率！