盒模型的四要素：宽高（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会增加盒子的面积。
网友评论