前端【盒模型】

盒模型包括 width+height+padding+margin+border

padding：调整元素内容距离元素边缘的距离

设置padding增加了盒模型面积

一个值：四个方向

两个值：第一个值代表上下  第二个值代表左右

三个值：第一个值代表上 第二个值代表左右  第三个值代表下

四个值：上右下左

margin：用来调整元素之间的距离

一个值：四个方向

两个值：第一个值代表上下  第二个值代表左右

三个值：第一个值代表上 第二个值代表左右  第三个值代表下

四个值：上右下左

margin存在的问题

问题1

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

问题2

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

解决方式

1.使用padding代替margin

2.给父元素设置overflow：hidden

border

边框宽度（border-width）

边框颜色（border-corlor）

边框样式（border-style）

solid：实线        dotted：点线        dashed：虚线       double：双实线

border也会增大盒模型的面积

           可以分方向设置

圆角度  border-radius：50%;

圆角度也可以分方向设置

正常盒模型和ie盒模型(怪异盒模型）区别：

正常盒模型设置padding和border会增大盒模型面积

ie盒模型设置padding和border会挤压内容区

如何把正常盒模型变成ie盒模型

box-sizing   border-box