我们知道一个网页就是一个 html 文档，文档是由许多的 html 标签 (元素)组成，使用 CSS 处理网页的时候认为每一个元素都是一个盒子(框)，所以只要在合适的位置摆放合适的盒子就可以实现对网页的布局，基本的实现方法就是大盒套小盒。盒子模型是 CSS 中最重要的概念。
盒子(框)模型
首先我们要知道什么是盒子模型以及盒子模型的几个重要的概念，如下图如所示：
内边距
盒子的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。
padding 属性
CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。
由于我们有四个内边距，我们可以使用四个属性分别设置四个方向(上、右、下、左)的内边距：
padding-top 、padding-right 、padding-bottom 、padding-left。
{% note info %}
注释:内边距会影响整个盒子的大小，虽然内容区的大小不会改变，但是整个盒子的外观会变大。
所以整个盒子的大小就是由 元素内容 、内边距、边框 决定，为三者之和。
{% endnote %}
简写属性
我们可以在属性 padding 中同时为四个方向设置内边距。四个值的顺序为上、右、下、左：
h1 {padding: 10px 5px 20px 15px}
上面的例子，我们就为 h1 设置分别为 上、右、下、左四个边的内边距分别为 10px、5px、20px、15px 大小。
边框
border 属性
元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。
border 属性允许你规定元素边框的样式、宽度和颜色。
边框的样式
border style 属性：
border-style:dotted solid double dashed;
分别表示的是: 点线、实线、双线 以及 虚线。
边框的宽度
border width 属性：
为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em；或者使用 3 个关键字之一，它们分别是 thin 、medium（默认值） 和 thick。其中 thin 、medium 和 thick 三个关键字在不同的浏览器中代表的像素值大小不确定，可能分别是 5px、3px 、2px，也可能是 3px、3px 、1px，所以最好不要轻易使用这三个关键字。
同理，除了 border-width 属性外，我们还可以分别指定四个方向边框的宽度，使用的是下面四个属性：
border-top-width 、 border-right-width 、border-bottom-width 、border-left-width。
边框的颜色
border-color 属性：
该属性可以使用任意的颜色值：可以是颜色名，也可以是十六进制数以及 RGB 值：
border-color: red rgb(0,245,255) #bbffaa yellow;
上面的标记就是为边框的四个方向定义颜色 ：上、右、下、左的颜色分别就是 red 、rgb(0,245,255) 、#bbffaa 、yellow。
同理，除了 border-color 属性外，我们还可以分别为四个方向指定边框的颜色：分别是下面的四个属性：
border-top-color 、 border-right-color 、border-bottom-color 、border-left-color。
简写属性
我们通常不会写得这么麻烦，如无特殊要求，我们只要使用简写属性即可，border 属性就可以一次性的设置这三个内容,比如：
h1 {border: 1px solid #000}
这里我们同时为 h1 元素的四个边框进行设置，宽度是:1px，样式是:solid,边框颜色是黑色:#000。
外边距
margin 属性
外边距指的是围绕在元素边框的空白区域。设置外边距会在元素外创建额外的“空白”。
设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。
margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。
例如,下面即为 h1 的各个边上设置为 1 个英寸的空白：
h1 {margin: 1in;}
下面的这个例子为 h1 的四个边分别设置不同的外边距：
h1 {margin: 1px 2px 3px 4px;}
和内边距以及边框的设置一样，遵循顺时针的顺序：上、右、下、左。
同理，除了 margin 属性外，我们还可以分别为四个方向的边框，分别是下面四个属性：
margin-top 、 margin-right 、margin-bottom 、margin-left。
例如下面的一个例子：
h2 {
margin-top: 20px;
margin-right: 30px;
margin-bottom: 30px;
margin-left: 20px;
}
就等价于下面的声明：
h2 {margin: 20px 30px 30px 20px}
显然这种情况下使用简写属性更加简单一点。
当然，除了我们可以给 margin 四个值外，我们还可以使用 值复制 方法给 2 个或者 3 个值，下面详细讲解值复制。
值复制
- 使用正常的四个值，依次是上、右、下、左：
h1 {margin: 1px 10px 1px 10px;}
- 使用三个值，三个值依次代表的是：上、左右、下：
h1 {1px 5px 3px;} //等价于 h1 {1px 5px 3px 5px;}
- 使用两个值，则这两个值依次代表的是：上下、左右：
h1 {margin:1px 10px;} //等价于 h1 {1px 10px 10px 1px;}
注释: margin 可以指定负值，其意义也很好理解。
margin值还可以为auto给水平方向负值，如果只给一边设置auto，则是在浏览器中显示为最大值，比如是margin-left和margin-right;特别的margin: 0 auto表示元素在父元素水平居中。
外边距合并问题
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
特别需要注意的是即使是一个元素包含在父元素之内，也会发生外边距重叠的问题(这是一个非常隐蔽的问题，解决的方法也比较多),请看下图：
解决这一问题的方法也很简单，只需要让子元素和父元素的外边距不相邻即可： 例如我们可以在子元素和父元素之间加上某一个元素隔开即可。
小结：
盒子模型是 css 最重要的概念，在写 css 样式的时候，要做到心中有丘壑。我们这里主要讲了盒子最重要的三个概念：
-
内边距(
padding属性 ): 分别为四个边设置内边距：padding-top、padding-right、padding-bottom、padding-left; -
边框(
border属性 ): 分别设置四个边的边框：border-top、border-right、border-bottom、border-left。其中每一个边又具有三个属性border-width、border-style、border-color; -
外边距(
margin属性): 分别设置四个边的外边距：margin-top、margin-right、margin-bottom、margin-left。 -
简写属性： 除了为每一个方向设置内边距、边框以及外边距，如无特别的需求，我们可以同时为四个边同时设置上述三个属性，分别是：
padding、border和margin
参考：
[1] W3School CSS教程
