以下内容均为个人整理的观点，一个个字码出来的，不喜勿喷
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
睡了 ~ 拜拜 ~
网友评论