css中margin整理

magin
    magin重叠
        margin重叠的3种类型
            相邻的兄弟元素
            父级的第一个和最后一个子元素
            空的block元素
        magin父子重叠的条件
            margin-top重叠和margin-bottom重叠
            1.父元素非块状格式化上下文
            2.父元素没有margin-top或margin-bottom的值
            3.父元素和第一个子元素/最后一个子元素之间没有inline（文字图片等）元素分隔
            4.父元素没有height、min-height、max-height限制
        margin重叠的计算规则
            1.正正取大值
            2.正负值相加
            3.负负最负值
        实际用例
            当页面上有多个表单的时候margin-top、margin-bottom都设置，产生重叠，更具有健壮性，最后一个元素移除或位置变换，均不会破坏原来的布局（列表、垂直布局）
            父级writing-mode:vertical-lr(更流为垂直方向，父级相对定位，son绝对定位，margin:0 auto)
    magin负值定位
        margin负值下的两端对齐
        margin负值下的等高布局：margin改变元素占据空间
        margin负值下两栏自适应布局：元素占据空间随着margin移动
    magin无效情况
        inline水平元素的垂直：内联元素垂直
        margin重叠
        display：table-cell与margin:应用于除display为table相关类型，display:table-cell/table-row等是margin是无效的。
        position:absolute与margin ：绝对定位元素非定位反向（定位）的margin的值“无效”
        鞭长莫及导致的margin无效：图片+文字形式，图片有浮动，文字margin无效，是因为margin相对于整个容器而言，并不是图片
        内联特性导致margin无效：margin负值小到一定值的时候，页面没有变化，受制于父级的内联
    magin-start/magin-end
        正常流margin-start等于margin-left,两者不叠加
        水平右→左margin-start=margin-right
        垂直流margin-start=margin-top