css盒模型。边框和内外边距

css盒模型：
外边距 边框 内填充 内容

盒模型分为两种：
    标准盒模型：
    怪异盒模型（IE盒模型）：


边框：border
     border: 10px solid blue;表示设置10像素蓝色实线条的边框
     是以下三个样式的复合语法
                  border-width: 10px; 设置边框的宽度
                  border-color: blue; 设置边框的颜色
                  border-style: solid; 设置边框的样式
                        solid：实线
                        dashed: 虚线  装订线
                        dotted: 点线
                        double: 双线
     如何单独设置一个边的边框：
             border-left:
             border-right:
             border-top:
             border-bottom:
        border-radius 设置圆角边框 取值可以是 px  %  em  最大设置范围到50% 超出则按照50%计算
                    参数最少可以设置一个  最多可以设置八个
            border-radius: 5px  50%  50%  50% / 5px 50% 50% 50%;
                  前四个值代表水平方向的取值  左上  右上  右下  左下
                  后四个值代表垂直方向的取值

     利用css边框知识 在页面绘制一个三角形：
            需要将一个盒子宽高设置为0  然后设置四个边框，其中三个面的边框颜色设置成透明色，则会显示成一个三角形
                  width: 0px;
                  height: 0px;
                  border-left: 200px solid transparent;
                  border-top: 200px solid transparent;
                  border-right: 200px solid transparent;
                  border-bottom: 200px solid #ff0;

     内容： 我们所设置的宽和高 实际上指的是内容区域的宽高  （标准盒模型）
            width  宽
            height 高

     外边距和内填充：
            padding  内填充 （内边距/内补白）  ： 表示一个元素，边框和内容之间的距离
                padding: 20px; 如果只给一个值，代表上下左右的内填充同时设置20px
                padding: 20px 40px;  如果给两个值 第一个值代表上下  第二个值代表左右
                padding: 20px 40px 60px; 三个值  第一个值代表上 第二个值代表左右 第三个之代表下
                padding: 20px 40px 60px 80px; 四个值分别对应  上  右  下  左   以顺时针方向赋值
                padding-bottom:; 单独设置一边的内填充 可以使用 padding-方向 来设置
            margin  外边距（外补白）  表示元素与元素之间的距离，也就是边框以外的距离   设置的值和内填充原理一致
                当设置外边距时 如果兄弟元素之间，上下的外边距有重合，则取最大值

    去除浏览器默认的所有标签的外边距和内填充
            *{
                margin: 0;
                padding: 0;
            }

    设置一个盒子在父元素宽度内水平居中
            margin:0 auto;

    外边距的重合问题：
        当子元素和父元素的上外边距重合到一起时，不管给小盒子还是大盒子设置上外边距，影响的都是大盒子，
        取值取两者的最大值

盒模型的计算：
标准盒模型  宽度计算： width + paddingleft + paddingright + borderleft + borderright + marginleft + marginright
IE盒模型  宽度计算：  width  + marginleft + marginright

标准盒模型 设置的 width  =  实际内容的宽度
IE盒模型  设置的  width = 实际内容的宽度 + 边框的宽度 +  内填充的宽度

两种盒模型之间的转换：
    box-sizing:content-box; 标准
    box-sizing:border-box; IE