CSS 浅析盒子模型Box Model

开局放张图，程序全靠编

在我们学习前端布局时，对于盒子模型的理解，如果是刚开始的话，那么很容易就会出现理解误区，在编写前端界面时，明明是按着定义来的，但是呈现出位置就很稀奇古怪，就很稀奇古怪，就***很稀奇古怪…

margin外边距
对于外边距的理解，如果拿人举例，将人装进冰箱，那么…需要几步？？
这里如果将冰箱当做边界，那么人的皮肤与冰箱的距离就是咱们说的外边距margin
border边框
继续拿人举例，那么border就是你的皮肤厚度，也就是你脸皮的厚度

padding内边距
说过了外边距和边框以后，再来看内边距，想必大家应该已经理解它了，我们再拿人举例，心脏就好比网页中实质你要显示出来的内容，它与你皮肤之间的距离就是padding

浪漫情话：
你心与我心之间仅仅隔了一个margin、两个border、两个padding
                          —————尼古拉斯·海浪

不过仅仅理解概念是不足以撑起前端的门面的，在实际的运用中还要深入了解，比如因为div是块级元素，所以在排版时有时不注意就会生成一列图标的尴尬情况，还是要自己探索探索的，祝好运~