CSS盒模型概述

图片来源于网络：侵删；

我们可以把每个元素都看成一个盒子，盒子模型是由四个属性组成的，如下表：

属性	说明
content	内容，可以是文本或图片
margin	外边距，定义当前元素与其他元素（或者当前标签与标签）之间的距离
padding	内边距，定义内容与边框之间的距离
border	边框，用于定义，元素的边框

1. 内容区。
   内容区是盒模型的中心，内容区有三个属性：width、height、和overflow。width、height针对内容区而言，并不包括padding部分。内容过多时可以使用overflow来指定溢出的处理方式。
2. 内边距
   内边距指的是内容和边框之间的空间，有五种属性padding-top、padding-rigt、padding-bottom、paddin-left。及以上四个方向的简写内边距属性：padding。
3. 外边距
   外边距指两个盒子之间的距离，他可能是父子元素的距离，也可能是兄弟元素的距离。
   外边距属性也有五种：margin-top、margin-right、margin-bottom、margin-left，以及margin。同时，CSS允许给外边距属性指定负数值，当外边距为负值时，整个盒子将向指定负值相反方向移动，产生盒子重叠效果。
4. 边框
   边框有三个属性border-width、border-style、border-color、border（简写属性）