盒模型的认识

 

盒模型包括：width（宽度）+height（高度）+padding（内边距）

margin（外边距）  border（边框）

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

          设置padding增加了盒模型面积

          一个值：四个方向

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

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

          四个值：上 右 下 左

border(边框)  

border-left-color （设置左边框颜色）

border-right-color（设置右边框颜色）

boder-top-color（设置上边框颜色）

boder-tottom-color（设置下边框颜色）

  扇形图片时：

Border：10px solid bottod bashed

border：边框宽度(border-width) 边框颜色(border-color) 边框样式(border-style solid：实线  dotted:点线 dashed:虚线 double:双实线)

        border也会增大盒模型的面积

border-radius：圆角度

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

margin存在的问题

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

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

    解决方式 1.使用padding代替margin

            2.给父元素设置overflow:hidden

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

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

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

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