02-margin的兼容性问题

 标签分类：
            单双标签：单标签  双标签
            标签语义分类  ： 有语义  没有语义
            标签特性： 块元素  行内元素  行内块元素

        盒模型属性的特性：
            1. width height : 行内元素不支持宽高，需要转换为块元素或者 行内块元素
            2. padding： 行内元素不支持上下的padding(padding 可以撑起来高度，但是不占位置), 但是支持左右的padding
            3. margin: 行内元素不支持上下的margin， 支持左右的margin     
            
            

        margin的兼容性问题：
            1. marign-top的穿透问题：给子元素设置的margin-top值，会作用到父元素的身上，这种想象称之为margin-top的穿透问题
            解决方案：
                1. 给父元素添加 border   弊端：盒模型计算
                2. 给父元素添加 overflow:hidden;   弊端：定位超出盒子的元素 溢出会被隐藏
                3. 使用父元素的padding-top 代替子元素的margin-top, 同时父元素的height 减去padding-top的值(推荐使用这种)

            2. 上下margin的重叠问题：
                有两个元素a 和 b, a元素设置 margin-bottom, b元素margin-top, 此时上下margin会重叠; 谁的取值大以谁为准
                解决方案：
                    1. 给一个元素设置margin值
                    2. 给一个元素添加父元素， 并且父元素添加 overflow:hidden; (BFC(块级格式化上下文)布局)

        margin的应用：
            margin:0 auto; 可以让一个有固定宽度且宽度不为100%的块元素水平居中;