作为一个java开发程序员的话，前端的知识还是要懂一点的，今天遇到了一点小问题，关于盒子模型的，再次总结一下分享给大家，这些基础的知识希望大家常看，对以后的开发肯定是有好处的。

我们称之为盒子模型，原因是跟我们生活中平常所用的盒子太像了。

想象一个盒子，它有：外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性；

图片来自网络

内容（CONTENT）就是盒子里装的东西（在网页设计上，内容常指文字、图片等元素）；

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

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

边界(MARGIN)则说明盒子与盒之间的距离。

在网页设计中的和盒子与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏，但是要注意，一旦盒子体积增大，页面有可能会“飘”，就是有可能原本在页面右端的元素忽然跑到了左边原色的下边

图片来自网络

我们看一下这个盒子，它有上下左右四条边，所以每个属性都包括四个部分：上下左右；这四部分可同时设置，也可分别设置；内边距可以理解为盒子里装的东西和边框的距离，而边框有厚薄和颜色之分，内容就是盒子中间装的东西，外边距就是边框外面自动留出的一段空白。

下图是W3School的Box Model 图解：

元素框的最内部分是实际的内容（element）；直接包围内容的是内边距（padding），内边距呈现了元 素的背景（background）；内边距的边缘是边框（border）；边框以外是外边距（margin），外边距默认是透明的，因此不会遮挡其后的任 何元素（其实元素的margin就是其所在父元素的padding）。元素的背景应用于由内容和内边距、边框组成的区域。

基本上我们上网看到的网页都很多都是以这个为基础的，一个网页可能包含很多个这样的小盒子，一个网页可能是一个大盒子，我们在设计的时候最好是先用ps先弄出一张图来，大家都同意用这张图来做网页的话在来开发，因为开发一个好的网页太耗时了，我们先开发别人看不上你就白忙活了，好了，这只是些基础知识，有兴趣的朋友自己可以深入的了解一下。

如果觉得我的文章对你有帮助的话，请关注我，后续会有更好的文章。