margin的用法

对于margin的用法,我也是刚刚从老师那里了解了一部分用法,所以决定写下以作为以后的一个参考

margin不同于相对定位和绝对定位,因为相对与绝对是位置的直接一定,而用margin则是在原来位置的某侧加入类似"棉袄"的东西,只是不会表现出来,现在我举个例图大家就明白了

<div class="rel-father"><div/>





.rel-father{
    width: 300px;
    height: 300px;
    background-color: aliceblue;
    border: 1px solid black;
    margin:0 auto;   

这是html和副本的代码

margin不显示的图像

可以看到这个框两侧是空白的,但是我们如果用鼠标右键对其进行检查时,就能发现"棉袄" 

检查之后的图 

所以那些黄色部分就是margin添加的

我们这个时候再用position: relative;相对路径来写可以发现它就没有这个添加部分 

<div class="rel-father">





.rel-father{
    width: 300px;
    height: 300px;
    background-color: aliceblue;
    border: 1px solid black;
    margin-left: 10px;  
    position: relative;
    left: 50px; 

 

显然,利用 position: relative;写是不会有的,这里的对比十分明显,黄色部分是margin,空白地方则是利用相对位置来移动的,当然margin的用处肯定是不止于此,各位有任何其他用法都可以发表自己的看法