今天再幫同事調試一個樣式的問題時，我發現了一個很神奇的現象，而其中的原由我個人卻不得而知，現記錄如下，待日後破解。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap{
position: relative;
height: 200px;
width: 300px;
background: yellow;
}
.inner{
position: absolute;
bottom: 0;
height: 20px;
left: 50%;
margin:0 auto;
width: 60%;
text-align: center;
margin-left: -30%;
margin-bottom: 20px;
background: green;
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner">123</div>
</div>
</body>
</html>
奇怪的樣式表現如下
可以看到inner的margin-bottom只有一半，另一半神奇的消失了，改變margin-left的值，會發現margin-bottom一起變化，當margin-left爲0時，表現如下
我們發現margin-bottom的表現又正常了，現在可以確定以下兩點
1、該表現與父容器設置的position有關，因爲當去除父容器時，這個神奇的表現消失了
2、該表現與inner設置的margin-left的值相關，可以明顯的看到隨着margin-left值的變化，margin-bottom的表現跟隨着一起變化
歡迎各位路過的老鐵指教！