margin负值的应用总结

Posted jolee

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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

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的负值隐藏



以上是关于margin负值的应用总结的主要内容,如果未能解决你的问题,请参考以下文章

element-ui栅格系统之margin为负值的情况总结

几个常见的布局的多种实现方式及margin负值总结

关于margin和padding取值为百分比和负值的总结

负值之美:负margin在页面布局中的应用

CSS看了C站CSDN源码,这次带你彻底搞清楚经典的 双飞翼布局 与 圣杯布局 - margin负值 - 浮动 - padding

双飞翼布局的改造 box-sizing和margin负值的应用