盒子模型
HTML中的每一个元素都可以看做是一个盒子,可以具备这4个属性。
- 内容（content）：元素的内容width/height
- 内边距（padding）：元素和内容之间的间距
- 边框（border）：元素自己的边框
- 外边距（margin）：元素和其他元素之间的间距
因为盒子有四边, 所以margin/padding/border都包括top/right/bottom/left四个边。
内容 – 宽度和高度
设置内容是通过宽度和高度设置的：
- 宽度设置: width，默认值是auto
- 高度设置: height
注意: 对于行内级非替换元素来说, 设置宽高是无效的。
- min-width：最小宽度，无论内容多少，宽度都大于或等于min-width
- max-width：最大宽度，无论内容多少，宽度都小于或等于max-width
- 移动端适配时, 可以设置最大宽度和最小宽度
- min-height：最小高度，无论内容多少，高度都大于或等于min-height
- max-height：最大高度，无论内容多少，高度都小于或等于max-height
内边距 - padding
padding属性用于设置盒子的内边距, 通常用于设置边框和内容之间的间距。padding包括四个方向, 所以有如下的取值:
- padding-top：上内边距
- padding-right：右内边距
- padding-bottom：下内边距
- padding-left：左内边距
padding单独编写是一个缩写属性：padding-top、padding-right、padding-bottom、padding-left的简写属性。padding缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左。
