【技巧】负margin是什么玩意（使用一）

作者: 李李李李李晓华 | 来源:发表于2019-03-12 23:12 被阅读0次

【技巧】负margin是什么玩意（使用一）
【技巧】负margin是什么玩意儿（理论）
Python HTML和CSS 6：margin的使用技巧和
css经典布局之stick footer布局
使用函数封装组件-Tab组件
负margin
CSS样式布局
负margin
CSS布局奇淫巧计之-强大的负边距
负边距、三栏布局（12）

以下内容均为个人整理的观点，一个个字码出来的，不喜勿喷
负margin的理论上一篇大概说了一下，那么到底该怎么使用呢？
根据日常开发和网上整理，大概整理了以下几个常用案例

1.水平垂直居中

水平垂直居中
思路：

外层父级为outer，内部元素为box

因为不知道父级元素的宽高，所以我们需要考虑怎么控制box块

首先让box相对于outer定位，当然left和top都是50%。（效果如图）

绝对定位后的位置

然后就要考虑让元素向左移动自身的一半（box宽100高100），向上移动自身的一半。此时再使用定位属性的left和top明显是不现实的。

所以怎样让box向左移动和向上移动呢？还记得上一篇说负margin的图吗？

各方向的负margin情况

所以此时直接设置box，margin-top和margin-left都为-50px，就可以解决问题（当然css3的transform也可以，这里直说负margin）
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
       .outer{
          width: 400px;height: 300px;background-color: >#ccc;position: relative;
       }
     .outer .box{
           width: 100px;height: 100px;background-color: coral;
           position: absolute;left:50%;top: 50%;
           margin-left: -50px;margin-top:-50px;
      }
   </style>
</head>
<body>
   <div class="outer">
       <div class="box"></div>
   </div>
</body>
</html>

2.去除列表的右边距

如图，这样的布局，我们对图片列表每一个元素都设置右边的margin，这样就不用单独给最右边元素单独设置类名（当然，这样很明显很麻烦）。但是最右边一列的元素的右margin是多余的。

看最后一列多余的右margin

假设列表每一个元素宽200px，间隙20px，但是外层水平居中的包裹元素只有640px的宽怎么办？硬要是塞进去，那么肯定一行放不下3个（每一元素占用宽度200+20，三个就是660px）。就会出现以下结果：

被挤下去了

所以我们在多嵌套一层结构，结构如下：
<div class="outer">
   <ul class="box">
       <li><img src="./01.jpg" alt=""></li>
       <li><img src="./01.jpg" alt=""></li>
       <li><img src="./01.jpg" alt=""></li>
       <li><img src="./01.jpg" alt=""></li>
       <li><img src="./01.jpg" alt=""></li>
       <li><img src="./01.jpg" alt=""></li>
       <li><img src="./01.jpg" alt=""></li>
       <li><img src="./01.jpg" alt=""></li>
       <li><img src="./01.jpg" alt=""></li>
   </ul>
</div>
outer父级已经设置好了640px的宽度，但是如果想要达到一排放3个列表元素，那么box必须660px，这时候怎么办呢?(这里只讲授负margin的方法)

box不设置宽度，是不是和outer一样宽，都是640px，当我们给box设置margin-right：-20px，这个时候box依然会和outer一样宽，那么box真实内容区域是不是已经到了660px呢？这样是不是就放下3列了吗？

但是outer仍然是640px，所以outer设置margin：0 auto后，仍然能保持真正的居中。css代码如下：
      *{margin:0;padding:0;list-style: none;}
       .outer{
           width:640px;
           margin: 0 auto;
       }
       .box{
           overflow: hidden;/*清浮动*/
           margin-right: -20px;
       }
       .box li{
           float: left;width: 200px; margin-right: 20px;
       }

3.去除多余的边框线

看下图有没有别扭的地方

image.png

很明显为了方便书写，每一个列表都设置了下边框（红色），但是最后一个下边框多余了。
你有想到怎么写吗?思考一下我们margin各个方向负值得那个图？

噜啦啦

我们如果给里边的列表元素写一个margin-bottom：-1px，那么列表元素的下边框是不是就被后边的元素覆盖住了？

但是除了最后一个列表元素，其他元素虽然有1像素的覆盖，但是不影响显示，而最后一个列表元素会被父级的下边框覆盖（要给父元素设置overflow：hidden 超出隐藏）
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
       *{margin:0;padding: 0;list-style: none;}
       .box{
           border: 1px solid #000000;width: 300px;text-align: center;overflow: hidden;
       }
       .box li{
           border-bottom: 1px solid red;margin-bottom: -1px;
       }
   </style>
</head>
<body>
<ul class="box">
   <li>今天的北京天气真好，就是不暖和</li>
   <li>今天的北京天气真好，就是不暖和</li>
   <li>今天的北京天气真好，就是不暖和</li>
   <li>今天的北京天气真好，就是不暖和</li>
   <li>今天的北京天气真好，就是不暖和</li>
   <li>今天的北京天气真好，就是不暖和</li>
   <li>今天的北京天气真好，就是不暖和</li>
</ul>
</body>
</html>
小伙伴自己动手练习一下噻