在HTML中，每一个标签都是矩形地，它们互相组合形成了所谓的盒子模型。

盒子模型的定义：在CSS中，把HTML中的所有标签定义为盒子，由五个部分组成：边界(外边距)（margin），边框，补白（内边距）(padding)，内容，背景。这就是盒子模型。

我们可以通过一系列的属性去设置盒子模型。具体来说，有如下一些属性：

width和heigth

width和height不是盒子的宽度和高度，而是盒子内容的宽度和高度。

盒子在网页上占据的宽度：

width+左右paddinng+左右border+左右的margin

盒子在网页上占据的高度：

height+上下的padding+上下的border+上下的margin

border

盒子的边框有由三部分组成：

边框的粗细 border-width

边框的样式 border-style

边框颜色 border-color

一般都是使用复合属性：border:1px solid red;

注意细节：

border是三个子属性的复合属性，属性值以空格隔开。顺序是没有要求。

当设置border时，默认是给四个边框都设置了，也可以给一个边框设置，如下：

border-top border-right border-bottom border-left

边框除了solid个样式外，还有其它的样式，具体看手册。

表示内边距，是指内容区域到border间的距离。 padding在网页上是要占据空间的。背景颜色默认会填充padding。

1，如果就写一个padding，那么就意味着是四个方向的内边距。

padding又可以分为四个子属性：

padding-top padding-right padding-bottom padding-left

2，在设置padding时，可以按照上，右，下，左的顺序来设置四个方向的padding

3，关于padding有四种写法：

一个值：上，右，下，左都相同

有两个值：第一个值表示上，下，第二个值表示左，右

有三个值：第一个值表示上，第二个值表示右，左，第三个值表示下

有四个值：第一个值表示上，第二个值表示右，第三个值表示下，第四个值表示左

背景颜色默认会填充padding

用来设置外边距

我们在计算当前盒子在页面中所占空间时，必须要考虑这个margin

和padding差不多,margin也有四种写法，如下：

当后面是一个值时：表示四个方向的margin同时设置

当后面是二个值时：第一个值表示上，下，第二个值表示左，右

当后面是三个值时：第一个值表示上，第二个值表示左，右，第三个值表示下

当后面是四个值时：第一个值表示上，第二个值表示右，第三个值表示下，第三个值表示左

当然，和padding一样，也可以单独设置四个方向上的margin值，如下：

margin-top margin-right margin-bottom margin-left

HTML中元素分为块级元素和行内元素。对于块级元素来说，6大属性都有作用。对于行内元素来说，width，height都不起作用， padding 和 margin在水平方向上有作用，在垂直方向上没有作用。

两个元素产生外边距margin重叠有两个必不可少的条件：元素为块级元素，重叠方向为垂直方向。

重叠都发生在兄弟元素之间或者父子元素之间