CSS盒子模型

以前对css盒子模型一直处于模糊状态，今天做一梳理。
所有的HTML元素都可以看作是在一个盒子中存放的，而box modle就是用来设计HTNL元素布局的。一般将这个盒子基本模型理解为如图1所示：

盒子模型

关于各部分的属性描述如图2所示：

盒子模型各元素属性

通常，我们在设置边距时有以下几种方法，也是我平时容易搞混淆的。如在设置外边距时：

margin:20px ； /*上下左右边距均为20px*/
margin:15px 20px；   /*上下边距为15px，左右边距为20px*/
margin:5px  15px 10px；   /*上边距为5px，左右边距为15px,下边距为10px*/
margin:5px 15px 20px 25px；   /*上边距为5px，右边距为15px,下边距为20px，左边距为25px，*/

以前记不清这个边距的顺序，不过仔细观察一下会发现有四个值时值是按照顺时针的方式排的；有三个值的时候就像从上而下人的结构，先是头，然后是左右手，然后是下面的脚；两个值时就是先上下后左右啦。同样，padding的规律也是如此。
咳咳，学习愉快，一起分享啊。