css盒子模型，說簡單也簡單，用的時候也有不簡單的。

其中margin的值可以為負值，并且為了實現margin，忽略父級的padding、border、甚至定位。這在布局上很有用，要注意。

------------

比如，div1，嵌套div2。按照直覺，div1有border和padding，里面的內容頂到頭，不能超過外面的盒子（div1）吧？可惜不是，只要div2的margin是負的，如圖浮動出了一樣。

下面再看。

 1 <style type="text/css">
 2     div {
 3       width: 100px;
 4       height: 100px;
 5     }
 6     #div1 {
 7       background-color: #F00;
 8       border:100px solid #345;
 9       padding:100px;
10       position: relative;
11       float: right;
12     }
13     #div2 {
14       background-color: #0F0;
15       /*margin-left: -200px;*/
16       position: absolute;
17       left: 0;
18     }
19     </style>

div1是相對定位，padding和border都是100px，在谷歌瀏覽器中，div2為絕對定位，left為0，就是div2在div1中，同時舉例左邊為0，按照自然直覺，應該是padding后為0，但是實驗得知是，靠近border內側為0，也就是說，絕對定位是跟外面的容器比，但是不看外面容器的padding，而是以border為參考。

?

再加上margin-left:-200px;那么，div2還要向左再走200px;

本文轉載于:猿2048https://www.mk2048.com/blog/blog.php?id=bbjiib&title=css盒模型中margin很牛逼