CSS 的盒子模型

今天学到了“盒子模型”的课程，终于快要解开我关于“width，padding，border&margin”四者的疑惑了。

弄清楚这四者关系的突破点必须先区分以下2个概念：内容和元素

内容可以是在html页面上显示的文本、图片、链接等；但是元素是基于html总框架下每一行的内容都属于html的元素，内容加上相应的内边距、边框和外边距才成为一个元素，也就是一个盒子模型。

因此一个元素实际宽度（盒子的宽度）=左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距

如图所示：



慕课网上把padding称作填充，margin称作边界的。但是我认为将padding和margin分别称作内边距和外边距，在逻辑上更直观、便于理解。

对于高度方向上的关系，同理可知：一个盒子的高度＝上外边距+上边框+上内边距+内容高度+下内边距+下边框+下外边距
4000

图片来自于慕课网（http://www.imooc.com/code/2054），感谢提供资源！

现在一切资源、时机准备充分了，接下来的时间就是要鼓足干劲，力争上游！