盒模型

盒模型的四要素：宽高（width+height）、内边距（padding）、边框（border）、外边距（margin）。依次是从内到外。

宽高

宽高：宽 width 高 height 单位是像素 px

内边距

内边距：padding后面可以跟1~4个值。赋值顺序是上右下左。

• 当1个值时，上右下左一样。
• 当2个值时，第一个值是上下，第二个值是右左。
• 当3个值时，第一个值是上，第二个值是右左，第三个值是下。
• 当4个值时，依次是上右下左。
  单独赋值：
• 上：padding-top
• 右：padding-right
• 下：padding-bottom
• 左：padding-left
  padding会增加盒子的面积。

边框

语法示例：border：1px solid red；复合写法。
单独写法：（三者缺一不可）

• 线宽：border-width
• 线型：border-style：solid 实线 dashed 虚线 dotted 点线
• 线色：border-color
  单独赋值：同padding单独赋值。
  border会增加盒子的面积。