01-margin属性

        盒模型：
            width :
            height :
            padding : 内填充/内边距/内补白
            border ： 边框
            margin ： 外边距 ; 元素与元素之间的距离

 

        盒模型计算：
            1. 计算元素真实的大小 
                元素真实的宽度 = width(你设置的) + padding(左右的) + border(左右的)
                元素真实的高度 = height(你设置的) + padding(上下的) + border(上下的)

            2. 计算元素在页面中真实占有的空间 (页面布局)
                元素真实的宽度 = width(你设置的) + padding(左右的) + border(左右的) + margin(左右的)
                元素真实的高度 = height(你设置的) + padding(上下的) + border(上下的) + margin(上下的)

        margin: 外边距 综合属性
            取值： 
                margin: 50px; // 一个值代表四个方向： 上下左右 一致

                margin:20px 50px; // 两个值； 第一个值代表上下   第二个 左右

                margin:20px 50px 100px; // 三个值： 第一个值上   第二个值左右  第三个下

                margin:20px 50px 80px 120px; // 四个值  依次代表上右下左

        margin拆分属性：
            拆分为四个方向: left top  right bottom
            marign-top:100px; // 针对单一方向设置margin值
            margin-left:10px;
            margin-bottom:10px;
            margin-right:20px;