盒模型的内容

盒模型

盒模型包括：width宽、height高、padding内边距、margin外边距、border边框

一、内边距padding

1.用途：调整元素内容距离元素边缘的距离；设置padding增加了盒模型的面积

2.分四个方向(上、右、下、左)

3.设值

（1）一个值：四个方向

（2）两个值：第一个代表上下、第二个代表左右

（3）三个值：第一个代表上、第二个代表左右、第三个代表下

（4）四个值：分别代表上右下左

4.可以单独为一个方向设值

padding-left、padding-right、padding-top、padding-bottom

二、外边距margin

1.用途：用来调整元素之间的距离

2.margin存在的问题：

（1）上下两个元素同时设置margin-bottom和margin-top会叠压取最大值

（2）第一个子元素的margin-top会传递给父元素

3.解决方式：

（1）使用padding代替margin

（2）给父元素设置overflow：hidden

三、边框border

1.用途：border会增大盒模型面积

2.设值

（1）一个值：四个方向

（2）两个值：第一个代表上下、第二个代表左右

（3）三个值：第一个代表上、第二个代表左右、第三个代表下

（4）四个值：分别代表上右下左

3.属性

（1）边框宽度：border-width

（2）边框颜色：border-color

（3）边框样式：border-style（solid实线、dotted点线、dashed虚线、double双实线）

4.border-radius：可以设置圆角度，最大支持50%