在CSS中尘吗，margin的值可以是正數(shù)，也可以是負數(shù)。
當margin為負數(shù)的時候源譬，對普通文檔流元素和對浮動元素的影響是不一樣的。
負margin的兩種情況
- 當元素的
margin-top或者margin-left為負數(shù)時宇整，“當前元素”會被拉向指定方向瓶佳。 - 當元素的
margin-bottom或者margin-right為負數(shù)時，“后續(xù)元素”會被拉向指定方向鳞青。
我們來看看下面的例子：
<style>
.container div {
width: 300px;
height: 60px;
line-height: 60px;
text-align: center;
color: #fff;
}
.first { background-color: red; }
.second { background-color: purple; }
.third { background-color: blue; }
</style>
<div class="container">
<div class="first">1</div>
<div class="second">2</div>
<div class="third">3</div>
</div>
margin-top和margin-left舉例
當元素的
margin-top或者margin-left為負數(shù)時霸饲，“當前元素”會被拉向指定方向。
此時我們將第2個div的margin-top進行設置：.second { margin-top: -30px; }臂拓，效果如下：
可以看到厚脉，當前元素（第2個div）被拉向top方向30px，并且覆蓋了div1胶惰。
如果是margin-left同理（可以理解為上圖逆時針旋轉(zhuǎn)90°）傻工，將第2個div設置為：.second { margin-left: -30px; }，效果如下：
當前元素（第2個div）被拉向tleft方向30px孵滞，并且覆蓋了div1中捆。
margin-bottom和margin-right舉例
當元素的
margin-bottom或者margin-right為負數(shù)時，“后續(xù)元素”會被拉向指定方向坊饶。
我們試著將第2個div的margin-bottom進行設置：.second { margin-bottom: -30px; }泄伪，效果如下：
可以看到后續(xù)元素（即第2個div）被拉向上一個元素（即第2個div）的方向，且覆蓋了上一個元素匿级。
margin-right也一樣：
運用場景
了解了負margin的規(guī)則蟋滴，我們來聊聊具體使用的場景染厅。
比較常用的技巧有：
- 圖片與文字對齊
- 自適應兩列布局
- 元素垂直居中
- tab選項卡
圖片與文字對齊
當圖片與文字排在一起的時候，在底部水平方向上往往都是不對齊的津函。如：
<img src="./icon.png" alt="icon">這是一個圖標
這是因為肖粮，圖片與文字默認是基線對齊（vertical-align:baseline;）。
如果想要實現(xiàn)圖片與文字底部水平方向?qū)R尔苦，除了使用vertical-align:text-bottom;這個方法之外涩馆，還可以使用兼容性比較好的負margin來實現(xiàn)：margin-bottom: -3px;，效果如下：
這個3px正是文本中baseline和bottom的距離蕉堰。
自適應兩列布局
自適應兩列布局通常指的是一列寬度固定凌净，另一列寬度自適應的布局方式。利用負margin技術可以很好地實現(xiàn)這種布局屋讶。
<style>
div {
float: left;
color: #fff;
height: 500px;
}
.siderBar {
width: 200px;
background-color: purple;
}
.content {
width: 100%;
margin-right: -200px;
background-color: plum;
}
</style>
<body>
<div class="siderBar">側(cè)邊欄冰寻，寬度固定200px</div>
<div class="content">內(nèi)容區(qū)，寬度自適應</div>
</body>
這時候改變?yōu)g覽器的寬度皿渗，可以看出右側(cè)內(nèi)容區(qū)可以自動適應瀏覽器斩芭。
元素垂直居中
用負margin+position:absolute可以實現(xiàn)block元素、inline元素以及inline-block元素的垂直居中乐疆。
.father {
position: relative; // 控制子元素在父元素之內(nèi)
width: 500px;
height: 500px;
background-color: cornflowerblue;
}
.son {
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px; // 元素height一半的負數(shù)
margin-left: -50px; // 元素
width: 100px;
height: 200px;
background-color: white;
}
原理是：絕對定位的top: 50%; left:50%;只是定位了son元素左上角的點的位置划乖，而margin-top和margin-left將自己拉回了寬高一半，將自己的中心點變成中心挤土。
tab選項卡
利用負margin技術可以實現(xiàn)選項卡的樣式設計琴庵。
如下代碼：
<style>
ul, li {
list-style: none;
}
.tab {
width: 400px;
}
.tabHd {
margin-bottom: -1px;
padding: 0 10px 0 0;
border: 1px solid #6c92ad;
border-bottom: none;
background: #eaf0fd;
height: 28px;
}
.tabList {
float: left;
margin-left: -1px;
padding: 0 15px;
line-height: 28px;
border-left: 1px solid #6c92ad;
border-right: 1px solid #6c92ad;
color: #005590;
text-align: center;
}
.tabList.current {
position: relative;
background: #fff;
}
.tabBd {
border: 1px solid #6c92ad;
}
.tabBd .roundBox {
padding: 15px;
}
.tabContent {
display: none;
}
.tabContent.current {
display: block;
}
</style>
<div id="tab" class="tab">
<ul class="tabHd">
<li class="tabList current">tab 1</li>
<li class="tabList">tab 2</li>
<li class="tabList">tab 3</li>
<li class="tabList">tab 4</li>
</ul>
<div class="tabBd">
<div class="roundBox">
<div class="tabContent current">選項內(nèi)容1</div>
<div class="tabContent">選項內(nèi)容2</div>
<div class="tabContent">選項內(nèi)容3</div>
<div class="tabContent">選項內(nèi)容4</div>
</div>
</div>
</div>
效果如下：
代碼中用到了兩個負margin，一個用于tabList仰美，通過向右邊“拉”用來重疊每個tab項的border迷殿。
另一個用于tabHd，通過向上“拉”咖杂，并且設置當前選項的背景色為白色摸吠，將選項內(nèi)容覆蓋住當前選項的下border怀读，而其余tab項由于沒有設置背景色默認為透明，于是不會被遮罩住捞镰。
