margin为负数的深入研究
2019-02-20 本文已影响0人
陈磊_2e3b
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>
