标签：需要 列表 htm main center 网上 像素 back round
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的负值隐藏
标签：需要 列表 htm main center 网上 像素 back round
原文地址：https://www.cnblogs.com/jolee/p/8979356.html
