美文网首页
margin为负数的深入研究

margin为负数的深入研究

作者: 陈磊_2e3b | 来源:发表于2019-02-20 21:07 被阅读0次

    margin-left或者margin-right为负数

    当块元素width:auto时,  margin-left和margin-right会增加元素的宽度

    当有具体width时,margin-left向左移动, 

    margin-right 减少css的读取宽度  如下图  (也就是后面的元素会挤进来)

    margin-left: -100px;

    html,body{    height: 100%;

    }body{    margin: 0;

    }.main{    width: 100%;    height: 100%;    float: left;

    }.main .in{    margin: 0 110px;    background-color: pink;    height: 100%;

    }.left,.right{    height: 100%;    width: 100px;    float: left;    background-color: lightgreen;

    }.left{    margin-left: -100%;

    }.right{    margin-left: -100px;

    }

    <body><div class="main">    <div class="in"></div></div><div class="left"></div><div class="right"></div></body>

    相关文章

      网友评论

          本文标题:margin为负数的深入研究

          本文链接:https://www.haomeiwen.com/subject/snykyqtx.html