margin负值的应用总结

margin负值之前一直应用都是定位和列表的时候，从来没有想着进行个总结，直到遇到了在项目中遇到了一个margin负值但是宽度增加的问题才想着研究下 margin负值的问题。现将网上找到资料和文章，加上自己理解整理如下

1.元素水平垂直居中

<style>
.popMsg{position:absolute;top:50%;margin-top:-150px;left:50%;margin-left:-150px;width:300px;height:300px;
background:#999;color:#fff;}
</style>


<div class='popMsg'>
     这个弹框要绝对居中啊
</div>

tips:top和left都设置50%；margin-top 赋高度的一半的负值；margin-left 设置宽度一半的负值即可。

2.列表元素两端对齐

<style>
.maina{width:500px;border:1px solid #f00;margin:20px auto;overflow:hidden}
.maina ul li{width:110px;height:100px;background:#ccc;margin-right:20px;float:left;margin-bottom:20px;}
.maina ul{margin-right:-20px;overflow: hidden}
</style>

<div class="maina">
    <ul>
        <li>第一个li啊</li>
        <li>第一个li啊</li>
        <li>第一个li啊</li>
        <li>第一个li啊</li>
        <li>第一个li啊</li>
        <li>第一个li啊</li>
        <li>第一个li啊</li>
        <li>第一个li啊</li>
    </ul>
</div>

tips:元素不存在width属性或者（width：auto）的时候，负margin会增加元素的宽度 so 设置ul 负值，宽度变宽同时向右偏移20像素，oveflow用于清除浮动

3.左右两列固定中间自适应

<style>
.maina{width:100%;float:left}
.main_in{margin:0 200px;background:#ccc;height:auto;}
.main_left{width:200px;height:300px;float:left;margin-left:-100%;background:#01AAED;}
.main_right{width:200px;height:300px;float:left;margin-left:-200px;background:#01AAED;}
</style>


<div class="maina">
    <div class="main_in">这里自适应啊</div>
</div>
<div class="main_left">这里是左啊</div>
<div class="main_right">这里是右啊</div>

tips:主体自适应的元素应该先定义，有两个div，外层div设置宽度（高度可选）和浮动；内部div设置margin值空出左右两侧的宽度（或宽度+间距）；左侧自适应左浮动后 margin-left 负 100%；右侧的 margin-left 负自身宽度

4.三列等高

<style>
.maina{width:100%;overflow:hidden;}
.mleft{height:100px;}
.mmain{height:150px;}
.mright{height:200px;}
.mleft,.mmain,.mright{width:33.3333%;float:left;padding-bottom:999px;margin-bottom:-999px;}

</style>
<div class="maina">
    <div class="mleft">这里是左边，高度设置100</div>
    <div class="mmain">这里是中间啊，高度设置150</div>
    <div class="mright">这里是右边，高度设置200</div>
</div>

tips：padding-bottom填充元素高度，再用margin-bottom为负值减少css读取元素高度，父元素设置overflow:hidden

以上。

margin负值的应用总结

猜你喜欢