盒子模型

一.边框样式：
                    1.border-color:边框颜色
                        1.1 border-top-color：上线颜色
                        1.2 border-bottom-color：下线颜色
                        .................................
                        1.3 border-color:颜色1    所有边框
                        1.4 border-color:颜色1 颜色2     上下为颜色1     左右为颜色2
                        1.5 border-color:颜色1 颜色2 颜色3    上为颜色1 左右为颜色2    下为颜色3
                        1.6 border-color:颜色1 颜色2 颜色3 颜色4     上右下左
                    2.border-width：指定的是边框的粗细
                        2.1    thin细
                        2.2    medium中等
                        2.3    thick粗
                        2.4    像素xxxpx
                    3.border-style：指定边框风格
                        3.1 none：默认
                        3.2 hidden：隐藏
                        3.3 dotted：圆点
                        3.4 dashed：虚线
                        3.5 solid：实线
                        3.6 double：双实线
                    4.border: 边框线宽度    颜色    边框风格    
                        4.1 border:1px purple solid;
        二.外边距
                margin：外边距，盒子与盒子
                margin-top：上外边距
                margin-right：下外边距
                margin-bottom
                margin-left
                margin:0px auto;        网页居中对齐的必要条件    1.块元素    2.固定宽度
        三.内边距
                padding：内边距，内容与盒子
                padding-left ：左内边距
                padding-right
                padding-top
                padding-bottom
                padding：位置1    位置2    上下为位置一    左右为位置二
        四.盒子模型尺寸
                盒子模型总尺寸=border+padding+margin+内容宽度
            box-sizing：content-box  |  border-box  |  inherit;
                content-box:默认值，盒子的宽度或者高度=border+padding+(margin)+width/height
                border-box:盒子的宽度或者高度等于元素内容的宽度或者高度
                inherit：元素集成父元素的盒子模型模式
        五.圆角
                border-radius：圆角
                border-radius：20px  10px  50px  30px;            四个属性值按顺时针排列

                1.原形：
                     border-radius: 50%;    宽度和高度相同
                2.半圆：
                     border-radius: 150px 150px 0px 0px;    两个角变，两个角不变，按照顺序，上半圆和下半圆宽度是高度的二倍，左半圆和右半圆高度是宽度的二倍
                3.四分之一圆：
                     border-radius: 0px 0px 150px 0px;        一个角变，按照顺序，宽度和高度相同
        六.盒子阴影
                box-shadow:10px 10px 30px yellow;
                inset：内阴影