作为一个多年后端开发，所有的html标签都认识，样式的属性也大概认识，所有的javascript也都能写，但是当要独立做一些页面的时候，发现就力不从心了。有时候朋友介绍的一些活，因为前端的功能而做不了。以前也有过一个朋友请我帮忙做一个工作室的网站，当时答应了，最后没有做出来，现在想想都尴尬。最近决定沉下心来，好好学学，不求前端能够多么精通，至少能够独立写一些页面，基于这个目标决定重新学习和梳理前端方面的知识。
为什么第一篇就写盒模型呢，主要还是从个人的从业经验有关，以前自己也写过页面，所有的标签都认识，样式百度也能百度出来个大概，但是经常出现margin，padding那一些样式试过来试过去，页面还是调不好。个人写博客也不准备针对小白用户，还是针对有着一些时间的后端开发经验，标签，样式的一些基础写法都知道的人，但是没有系统化的这些用户来写的。
话不多说，我们正式开始。
以上的图片是直接打开百度，按F12得到的一个盒模型的图片。
这里简单介绍一下，个人理解的盒模型的概念：作者本人认为，所有的元素都是一个盒子 <body></body>这是一个盒子，<body><div></div></body> 这个是一个大盒子<body>里面套了一个<div>的盒子。所以，在我的眼里，页面就是一堆盒子与盒子的组装与拼接，搞清楚盒子的属性，搞清楚盒子怎么定位了，个人认为写出一个页面来应该不难。
只要是一个盒子就有 content（图片中1903 *263）区域的中的内容，padding，border，margin这几个相关的要素。这几个元素就能影响你的页面会不会样式飞了。我们从里面往外面一层一层的来讲。
先给出个人的总结，后面在细节描述
| 属性 | 描述 | 改变大小 | 可以设定的子属性 | 可能的值 |
| padding | 内边距 | 会 | padding-left padding-top, padding-right, padding-bottom | auto， length（0，正数）， %， inherit（继承父元素的内边距） |
| border | 边框 | 会 | border-width, border-style, border-color, inherit | border-width常用值（0，正数） border-style 常用值 solid ，dashed ，dotted，none |
| margin | 外边距 | 不会 | auto， length（可正可负）， %， inherit（继承父元素的内边距） |
padding ：
这一个属性其实是4个属性的简写分别是 padding-left , padding-top , padding-right, padding-bottom。他们的设定决定了内容块与边框之前的距离。 我们来一个代码示例以及实际效果的截图
没有增加padding之前的
增加padding：10px 前后的效果如下
从图中我们可以看到效果，文字与边框上下左右都多出了10px的间隔，而且还多出了一个效果，div的宽度，高度都变了，这一点很重要，我们样式中的宽度，定义是的content（内容块）的宽度和高度，pandding的调整会导致我们的div的宽度的调整，如果想要整个div的宽度固定，需要在样式的宽度和高度设定上做出改变。上面的示例中，如果padding设置为10px，要把div改成固定的200 * 200 必须要把 宽度左右，上下各减去10 也就是宽度减去20，高度减去20就能还原跟以前一样的大小。 以前我就是有过padding更改了1个像素，整个页面全部飞掉的情况。
border :
其实上图中有了border的样式。不过有些效果不明显，border其实有好多个属性，包括上下左右方向的，包括线条宽度的，包括线条颜色的，包括线条的实现虚线的设置等。这个各位可以自己去延伸，这里要讲一个重要的点，border的宽度，高度也是在content之外进行追加的。我们来2个效果图给大家看看。
把border的粗细程度调成20px，整个div的高度和宽度也增加了，上面的图的效果就非常明显，所以跟padding一样，div想要固定宽度，就需要减去border的像素，保证最终整体div的宽度不会超出预期导致页面的样式飞掉。
margin：
margin同样有上下左右的方向，值可正可负。margin的设定的意义表示本盒子与他相同级别或者父级别盒子之间的间距。
上个示例图，看看效果
加了margin之后，两个同级别的div，以及他们与父级别的div之间都有10px的间距。但是margin不会影响div的宽度 ，各位可以自己去尝试。
以上是近期研究了盒模型之后个人的一些感悟，对于个人重新认识前端有很大的帮助，以上如有错误的地方，欢迎大家来拍砖
5921
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
