margin负值的应用总结

Posted 2020-11-02 jolee

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

5.margin负值去除多余线

<style>
 ul.table{ border:1px #ccc solid; width:300px; margin:20px auto;overflow: hidden;}
ul.table li{ float:left; width:100px;height:50px; text-align: center; line-height:50px;border-bottom: 1px solid #ccc;border-right:1px solid #ccc; margin-right:-1px; margin-bottom:-1px;}
</style>

<ul class="table">
    <li>第一行第一格</li>
    <li>第一行第二格</li>
    <li>第一行第三格</li>
    <li>第二行第一格</li>
    <li>第二行第二格</li>
    <li>第二行第三格</li>
    <li>第三行第一格</li>
    <li>第三行第二格</li>
    <li>第三行第三格</li>
</ul>

tips:li最右边和最后元素的右边框和下边框会和父元素的边框重合，需要用margin-right 负值和margin-bottom的负值隐藏