前端培训日记day06

盒模型

        margin  设置外边距
        margin-top  设置元素上面的外边距
        right  右
        bottom  下
        margin  左
    合写
        margin： 上 右 下 左；
        上=下 右！=左
        margin： 上 右 下 左
        上！=下 左=右
        margin： 上 右 下
        上=下 左=右
        margin： 上 右

    margin 的经典bug
    1  上下两个兄弟元素的margin重叠问题
        上下两个兄弟标签，设置margin的时候，他们之间的
        距离不是相加，而是谁设置的margin值大，就显示谁的距离
        即 上面的margin-bottom和下面的margin-top取最大值
        解决方法：给下面的元素添加 display：inline-block
    2  父子级子元素的margin-top的传递问题
        在子元素中设置margin-top，表现的结果是该margin-top传递到
        父级元素上，使得父元素上面的元素为该margin-top的值
        解决方法：
            a  给父元素添加overflow：hidden；
            b  给父元素添加border