今天看到別人的代碼贝攒，發(fā)現(xiàn)有位大神寫了如下代碼
margin-left:-100px
以前也一直用margin這個(gè)屬性，但是從來(lái)沒(méi)有用過(guò)負(fù)值时甚，雖然有在別的文章中看到過(guò)負(fù)值的使用場(chǎng)景隘弊，但是一直覺(jué)得它是一個(gè)無(wú)用屬性哈踱，如果css迭代版本的話，應(yīng)該會(huì)取消這種用法......
但是還是太年輕梨熙，去網(wǎng)上查了下
- 負(fù)margin是絕對(duì)標(biāo)準(zhǔn)的CSS开镣，W3C甚至標(biāo)注過(guò)：對(duì)于margin屬性來(lái)說(shuō)，負(fù)值是被允許的咽扇。
- 完全兼容 并且所有現(xiàn)代瀏覽器都支持這種負(fù)值
好吧邪财，我現(xiàn)在承認(rèn)有必要去使用下這種hack方法，如果使用得當(dāng)质欲，應(yīng)該會(huì)是一個(gè)很強(qiáng)大的屬性树埠。
表現(xiàn)
首先在兩個(gè)display為block的元素，并且這兩個(gè)元素沒(méi)有使用浮動(dòng)：
-
當(dāng)A元素的margin-top/margin-left被賦予負(fù)值時(shí)嘶伟，A元素將被拉進(jìn)指定的方向怎憋。比如向上或者向左
A元素的margin-top/margin-left被賦予負(fù)值時(shí) -
但是當(dāng)A元素margin-bottom/right為負(fù)數(shù)，A元素并不會(huì)如你所想的那樣向下/右移動(dòng)九昧，而是將后續(xù)的元素拖拉進(jìn)來(lái)绊袋，覆蓋本來(lái)的元素。
A元素margin-bottom/right為負(fù)數(shù) - 雖然margin可以應(yīng)用到所有元素，但display屬性不同時(shí)，表現(xiàn)也不同响迂，比如inline的上下margin就會(huì)無(wú)效。block的四個(gè)方向的margin都會(huì)有效展姐，這個(gè)很好理解。
重疊
如果margin設(shè)置成了負(fù)值姓建，大多數(shù)情況下后面的元素會(huì)覆蓋前面的元素，但是缤苫，也不總是速兔，具體覆蓋情況要分為背景和內(nèi)容，以及display的屬性活玲。
在普通流布局中涣狗，瀏覽器將頁(yè)面布局分為內(nèi)容和背景，內(nèi)容的層疊顯示始終高于背景舒憾。block元素分為內(nèi)容和背景镀钓，而inline元素或inline-block元素，它本身就是內(nèi)容(包括其背景等樣式設(shè)置)
總結(jié)一下就是镀迂，
- 在兩個(gè)block元素重疊后丁溅，后面元素可以覆蓋前面元素的背景，但無(wú)法覆蓋其內(nèi)容
- 當(dāng)兩個(gè)inline元素探遵，或兩個(gè)line-block元素窟赏，或inline與inline-block元素重疊時(shí)妓柜，后面元素可以覆蓋前面元素的背景和內(nèi)容。
- 如果兩者和浮動(dòng)元素重疊涯穷，那么內(nèi)容將會(huì)在浮動(dòng)元素之上顯示棍掐，但是背景可能就會(huì)被浮動(dòng)元素覆蓋。
其實(shí)這個(gè)沒(méi)有什么意義拷况，真的想要顯示在最上面作煌，使用z-index就可以了嘛
應(yīng)用
- 水平垂直居中，但是有要求赚瘦，要居中的元素的寬/高是不變的或者說(shuō)是確定的粟誓，比如width/height=100px,那么設(shè)置absolute的top/left=50%，然后margin-left/margin-top=-50px即可.但是這個(gè)場(chǎng)景用的不多蚤告。
如果要居中的元素的寬/高是不確定的努酸，這時(shí)margin負(fù)值就不能使用具體的px了，可以使用百分比杜恰。但由于margin的百分比都是相對(duì)于包含塊的寬度获诈，所以這里限制了只能設(shè)置寬高相同的居中元素。包含塊的寬度如何獲得呢心褐？利用absolute的包裹性舔涎，在需要居中的元素外面套一個(gè)空的<div>元素即可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>垂直居中</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.box{
position:relative;
width: 200px;
height: 200px;
background-color: lightgreen;
border: 2px solid black;
}
.out{
position: absolute;
left: 50%;
top: 50%;
}
.in{
height: 100px;
width: 100px;
background-color: pink;
margin-left: -50%;
margin-top: -50%;
}
</style>
</head>
<body>
<div class="box">
<div class="out">
<div class="in">測(cè)試內(nèi)容</div>
</div>
</div>
</body>
</html>
- 三欄自適應(yīng)布局
中間的主體使用雙層標(biāo)簽，外層<div>寬度100%顯示逗爹，并且浮動(dòng)亡嫌，內(nèi)層<div>為真正的主體內(nèi)容，含有左右110px的margin值掘而。左欄和右欄都采用margin負(fù)值挟冠。左欄左浮動(dòng)，margin-left為-100%袍睡，正好使左欄位于頁(yè)面左側(cè)知染。右欄左浮動(dòng)，大小為其本身的寬度100px
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>垂直居中</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html,body{
height: 100%;
}
body{
margin: 0;
}
.main{
width: 100%;
height: 100%;
float: left;
}
.main .in{
margin: 0 110px;
background-color: pink;
height: 100%;
}
.left{
height: 100%;
width: 100px;
float: left;
background-color: lightgreen;
margin-left: -100%;
}
.right{
height: 100%;
width: 100px;
float: left;
background-color: lightgreen;
margin-left: -100px;
}
</style>
</head>
<body>
<div class="main">
<div class="in">content</div>
</div>
<div class="left">left slider</div>
<div class="right">right slider</div>
</body>
</html>
