CSS样式中盒子模型有着举足轻重的地位。先看下图。

我们现在先转换下角色，假如你是一个图片样式设计者。你会考虑那些点那？

• 宽度，高度，大小，度量单位如何选择
• 背景颜色，图片是否也可以有背景图片，透明度是否可以设置。
• 是否旋转 ,旋转的角度，是否有阴影，阴影的大小，颜色怎么指定
• 是否有动画（animation），动画用多少时间播放完毕，动画的样式是否可以指定，动画是否可以循环
• 是否有边框(border属性),边框是否上下左右特殊指定，边框的样式是否可以变化，边框的角是否可以为圆角
• 图片与边框是否间隔，间隔如何控制
• 图片与图片之间如果想有间隙，这个又如何控制
• 可能还有很多其他的点

如果将上面的内容，让你实现，你会怎样做的。如果想不这么全也是没有关系的，这是一个逐步的过程，一口气吃不成胖子不是！随着经验越来越多，慢慢也就有经验了。样式设计者不断的迭代，不断的更新，才将各个方面考虑的比较全面。开始的时候也会有遗漏，要么不会有版本迭代了。想想版本升级的历史与时间，是不是也应该释然。

CSS是 Cascading Style Sheets的简写。大家叫做层叠样式表。期初我理解的层是立体汉堡的样子。结果CSS中的层类似洋葱切片。

猜测这是抽象思维在CSS中的运用。基于以上内容，不难推断出padding,border,margin的概念了。

在知识点学习的时候，我一般会跳出知识本身，站在开发者的角度去思考。你没有想到的点，其实也就是欠缺的知识。这个时候再去看知识点，忽略掉知识会被加强记忆。