以下內(nèi)容均為個(gè)人整理的觀點(diǎn)算撮，一個(gè)個(gè)字碼出來(lái)的分扎，不喜勿噴
1. 前言
前言我也不知道寫(xiě)什么罚攀，是不是寫(xiě)了就感覺(jué)自己像一個(gè)大神蛛枚？
biu~biu~biu~
2. margin有什么好說(shuō)的坏晦？
在CSS中萝玷，我們都知道使用margin來(lái)?yè)伍_(kāi)兩個(gè)元素之間的距離，當(dāng)然主要是撐開(kāi)兄弟元素的距離昆婿。
但是一旦如果有負(fù)margin的出現(xiàn)球碉，很多人的心情就變得如此糟糕，有的人特別喜歡使用它挖诸，有的人覺(jué)得它簡(jiǎn)直就是一個(gè)魔鬼呀~
請(qǐng)問(wèn)你是魔鬼么- 要不你給我說(shuō)說(shuō)四個(gè)方向的負(fù)margin分別對(duì)元素的影響分別是什么樣子的汁尺？
或者你想一下什么時(shí)候想要去用負(fù)margin的？
3. 大概了解一下負(fù)margin吧
一個(gè)特別特別有效果的CSS設(shè)置(W3C文檔也有提到)
W3C關(guān)于負(fù)margin說(shuō)明負(fù)margin不會(huì)破壞頁(yè)面流多律，而會(huì)有人提到相對(duì)定位（position：relative）痴突，相對(duì)定位的元素移動(dòng)但是原有的位置不會(huì)發(fā)生改變
而負(fù)margin向上移動(dòng)后搂蜓，后邊的頁(yè)面流也會(huì)緊隨其后。
相對(duì)定位
負(fù)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">相對(duì)定位 </div> <div class="box2"> </div> <div class="box3">負(fù)margin </div> <div class="box4"> </div> </body> </html>
-
當(dāng)然還有兼容性了辽装，IE6也不怕（懂我的意思吧）
干掉IE6 -
還要注意的是帮碰，我們現(xiàn)在說(shuō)的是在正常頁(yè)面流中，而不是對(duì)浮動(dòng)的元素添加負(fù)margin
加油
4.負(fù)margin什么效果拾积？
首先是靜態(tài)元素的負(fù)margin
別看我殉挽！看圖
如果設(shè)置的是top和bottom，那么元素會(huì)向如圖所示的方向移動(dòng)
如果設(shè)置的是right和bottom拓巧，元素不會(huì)移動(dòng)斯碌，而元素后的內(nèi)容會(huì)隨著箭頭過(guò)來(lái)覆蓋當(dāng)前元素如果是兩個(gè)浮動(dòng)的元素呢？
兩個(gè)浮動(dòng)的元素
如果給第一個(gè)元素設(shè)置margin-right為負(fù)值肛度，那么后邊的元素就會(huì)與其發(fā)生重疊
對(duì)第一個(gè)元素設(shè)置負(fù)margin-right如果給第一個(gè)元素設(shè)置margin-right：-100px;也就是元素的寬度的時(shí)候傻唾，會(huì)發(fā)生完全重疊
完全重疊<!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>
當(dāng)然，以上僅僅是很淺的理解負(fù)margin大概是什么承耿。具體的影響還有很多很多冠骄，比如對(duì)元素大小的影響。有機(jī)會(huì)在細(xì)說(shuō)~
理解以上的知識(shí)以后,我會(huì)在后來(lái)的文章中總結(jié)如何巧妙使用負(fù)magrin巧妙的進(jìn)行樣式制作
淺淺之談加袋，如果有機(jī)會(huì)凛辣，我會(huì)再行認(rèn)真學(xué)習(xí)進(jìn)行補(bǔ)充
睡了 ~ 拜拜 ~
