web前端02（盒模型）

盒模型包括 width+height+padding(内边距)+margin(外边距)+border(边框) 
padding:调整元素内容距离元素边缘的距离
          设置padding增加了盒模型面积
          一个值：四个方向
          俩个值：第一个值代表上下 第二值代表左右
          三个值：第一个值代表上 第二个值代表左右 第三个值代表下
          四个值：上 右 下 左
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

 /* 标签名{} 权重 1*/

    div{

        width: 100px;

        height: 100px;

        /* border：边框宽度（border-width） 边框颜色（border-color）边框样式（bordre-style）

         soild：实线    

         dotted：点线  

         dashed：虚线  

         double：双实线

        border也会增大盒模型面积

        */

        /* border: 3px deeppink double; */

        border-width: 5px;

        border-color: blue;

        border-style: dotted;

        /* 可以设置方向 */

        border-top-style:red ;

        border-top-style: solid;

        border-bottom-color: pink;

        border-bottom-style: dashed;

        /* 画角度 */

        /* border-radius: 50px ; */

    }

    /* class选择器 .+class名{} 权重：10% */

    .div2{

        /* border-radius: 30px; */

        /* 圆角度也可以分方向设置 */

        border-top-left-radius: 30px;

        border-top-right-radius: 20px;

    }

    .div3{

        width: 0px;

        height: 0px;

        /* background-color: aqua; */

        border: 50px solid red;

        /* transparent:透明色 */

        border-right-color: yellow;

        border-bottom-color: orange;

        border-left-color: transparent

    }

    p{

        width: 100px;

        height: 30px;

        background-color: tomato;

        /* 设置文本水平对齐方式 */

        text-align: center;

        /* 单行文本垂直居中 */

        line-height: 30px;

        border-radius: 15px;

        /* color字体颜色 */

        color: white;

    }