margin的使用方法与技巧

1.margin还可以用来做平移，作用类似translate哈哈。将元素设成absolute后就可以用margin随便平移他了，既不像relative那样要霸占空间，又不用为父元素设置relative,还可以和top,left,right,bottom组合使用

2.当为div设置padding后有些元素又想占满div， 这时只要设置这个元素的margin为负padding的值就行了

<b>marign 妙用1:</b>

<div class="padding20">
    padding20
    <hr class="margin_20"/>
    hr通过margin设成负数占满了div
</div>
<hr/>
<b>marign 妙用2:</b>
<div class="relative">
        absolute,相对位置(需要设置父元素为relative)
        <div class="abs">
            移动到这
        </div>
</div>
<br/>
<hr/>
<div>
    使用relative,相对位置
        <div class="relativeMove">
            移动到这
        </div>
    上边被relative占了一行空间！
</div>
<br/>
<hr/>
<div>
        使用margin,相对位置
        <div class="margin">
            移动到这
        </div>
    没被占用空间
</div>

css：

.relative {
    position: relative;
    width: 300px;
}

.abs {
    position: absolute;
    right: 10px;
    top: -10px;
    color: orange;
}
.margin {
    position: absolute;
    margin-left: 120px;
    margin-top: -30px;
    color: red;
}
.relativeMove {
    position: relative;
    right: -120px;
    top: -30px;
    color: green;
    
}
.padding20 {
    padding: 20px;
    width: 200px;
    border: 1px solid green;
}
.margin_20 {
    margin: 0 -20px;
}