web--盒模型

盒模型包括 width+height+padding（内边距）+margin（外边距）+border（边框）

内边距padding

padding：调整元素内容距离元素边缘的距离（设置padding增加了盒模型面积）

        一个值：代表四个方向

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

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

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

        还可以分方向设置 padding-left  padding-top  padding-right  padding-bottom

边框border

border：边框宽度（border-width）  边框颜色（border-color）

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

（border也会增大盒模型的面积）

圆角度:  border-radius: 100%; (可以分方向设置)

外边距margin

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

        一个值：代表四个方向

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

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

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

        还可以分方向设置 margin-left  margin-top  margin-right  margin-bottom

margin存在的问题

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

问题二：第一个子元素的margin-top会传递给父元素

解决方式：1.使用padding代替margin    2.给父元素设置overflow：hidden

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

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

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

如何把正常盒模型变成ie盒模型   box-sizing：border-box