CSS盒模型

CSS 盒模型 规定了元素框处理元素内容。

盒模型
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。背景应用于由内容和内边距、边框组成的区域。
在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

padding（内边距）

CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。可以分别设置上下左右的内边距：

• padding-top
• padding-right
• padding-bottom
• padding-left
  或者通过一条语句设置，padding: 10px 20px 30px 40px，顺序为上、右、下、左，顺时针。

边框

元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。
边框样式
通过border-style来设置边框样式，常用的有solid实线，dotted点状，其他形式可以应用时查询。可以分别设置上下左右边框：

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style
  也可以用一条语句，顺序为上右下左，顺时针。

边框宽度

通过border-width属性设置边框宽度。可以分别设置边框宽度：

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width
  也可以简写成一条语句，border-width：10px 10px 10px 10px，如果四个方向的宽度相同，还可以再简写成border-width: 10px 10px。
  设置边框宽度的前提是边框存在，也就是border-style的值不为none时有效

边框颜色

通过border-color属性来设置边框颜色。可以使用任何类型的颜色值，例如可以是命名颜色，也可以是十六进制和 RGB 值。也可以分别设置单边颜色：

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

透明边框

颜色值transparent这个值用于创建有宽度的不可见边框。

外边距

使用margin属性设置外边距。margin 可以设置为 auto。更常见的做法是为外边距设置长度值。可以分别设置外边距：

• margin-top
• margin-right
• margin-bottom
• margin-left
  也可以用一条语句，顺时针方向旋转。与padding相同。
  margin可以设置成像素或者百分比，当设置成百分比时，为父容器宽度的百分比。

外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。

垂直合并
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。
内部合并
假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：
空元素合并
如果这个外边距遇到另一个元素的外边距，它还会发生合并：
image