【技巧】负margin是什么玩意儿（理论）

2019-03-12 本文已影响0人李李李李李晓华

以下内容均为个人整理的观点，一个个字码出来的，不喜勿喷

1. 前言

前言我也不知道写什么，是不是写了就感觉自己像一个大神？

biu~biu~biu~

2. margin有什么好说的？

在CSS中，我们都知道使用margin来撑开两个元素之间的距离，当然主要是撑开兄弟元素的距离。
但是一旦如果有负margin的出现，很多人的心情就变得如此糟糕，有的人特别喜欢使用它，有的人觉得它简直就是一个魔鬼呀~

请问你是魔鬼么

要不你给我说说四个方向的负margin分别对元素的影响分别是什么样子的？
或者你想一下什么时候想要去用负margin的？

3. 大概了解一下负margin吧

一个特别特别有效果的CSS设置(W3C文档也有提到)

W3C关于负margin说明

负margin不会破坏页面流，而会有人提到相对定位（position：relative），相对定位的元素移动但是原有的位置不会发生改变
而负margin向上移动后，后边的页面流也会紧随其后。

相对定位
负margin元素
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
       div{
           width: 100px;height: 100px; margin:10px;
       }
      .box1{
          position: relative;top: -20px;background-color: aqua;
      }
      .box2{
          background-color: red;
      }
      .box3{
          background-color: bisque;margin-top: -30px;
       }
      .box4{
           background-color: coral;
       }
   </style>
</head>
<body>
   <div class="box1">相对定位 </div>
   <div class="box2"> </div>
   <div class="box3">负margin </div>
   <div class="box4"> </div>
</body>
</html>

当然还有兼容性了，IE6也不怕（懂我的意思吧）

干掉IE6
还要注意的是，我们现在说的是在正常页面流中，而不是对浮动的元素添加负margin

加油

4.负margin什么效果？

首先是静态元素的负margin

别看我！看图

如果设置的是top和bottom，那么元素会向如图所示的方向移动
如果设置的是right和bottom，元素不会移动，而元素后的内容会随着箭头过来覆盖当前元素

如果是两个浮动的元素呢？

两个浮动的元素

如果给第一个元素设置margin-right为负值，那么后边的元素就会与其发生重叠

对第一个元素设置负margin-right

如果给第一个元素设置margin-right：-100px;也就是元素的宽度的时候，会发生完全重叠

完全重叠
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
       .box1{
           width: 100px;height: 100px;background-color: coral;
           float: left;margin-right: -100px;
       }
       .box2{
           width: 100px;height: 100px;background-color: greenyellow;
           float: left;
       }
   </style>
</head>
<body>
   <div class="box1"></div>
   <div class="box2"></div>
</body>
</html>

当然，以上仅仅是很浅的理解负margin大概是什么。具体的影响还有很多很多，比如对元素大小的影响。有机会在细说~

理解以上的知识以后,我会在后来的文章中总结如何巧妙使用负magrin巧妙的进行样式制作

浅浅之谈，如果有机会，我会再行认真学习进行补充

image.png

睡了 ~ 拜拜 ~

【技巧】负margin是什么玩意儿（理论）

1. 前言

2. margin有什么好说的？

3. 大概了解一下负margin吧

4.负margin什么效果？

猜你喜欢

热点阅读