盒子模型
一个盒子我们会分成几个部分：
内容区（content）
内边距(padding)
边框（border）
外边框（margin）
QQ浏览器截图20181224204341.png
内容区
- 内容区指的是盒子放置内容的区域，也是元素中的文本内容，子元素都是存在于内容区中。
- 如果没有为元素设置内边距和边框，则内容区大小默认和盒子大小一致。
- 通过width和height 两个属性可以设置内容区的大小。
- width和 height 属性只适用于块元素。
内边距
- 指的是元素内容区与边框以内的空间。
- 默认情况下width和height不包含padding大小。
- 使用padding设置元素内边距：
padding: 10px 20px 30px 40px;
这样会设置元素的上、右、下、左四个方向的内边距
padding:10px 20px 30px;
分别指定上、左右、下四个方向的内边距
padding: 10px 20px;
分别指定上下、左右的内边距
padding:10px;
同时指定上左右下的内边距
边框
- 可以在元素周围创建边框，边框是元素可见框的最外部。
- 可以使用border属性来设置盒子的边框：
border:1px solid red;
上边样式分别指定边框的宽度、样式和颜色。
- 可以使用border-top/left/right/bottom分别指定上右下左 四个方向的边框.
- 也是默认width和height并包括边框宽度。
边框可以设置多种样式：
none（没有边框）
dotted（点线）
dashed（虚线）
solid（实线）
double（双线）
groove（槽线）
ridge（脊线）
inset（凹边）
outset（凸边）
外边框
- 外边距是元素边框与周围元素相距的空间。
- 使用margin属性可以设置外边距。
- 用法padding类似，提供方向margin-top/left/right/bottom
- margin: 0 auto;可以使元素居中。
overflow
- 当相关标签里面内容超出了样式宽度和高度时，浏览器会让内容溢出盒子。
- 可以通过overflow来控制内容溢出情况。
可选值：
hidden: 隐藏超出盒子的内容
visible：默认值
scroll: 添加滚动条
auto ：根据需要添加滚动条
QQ浏览器截图20181224204341.png
