css盒子模型，說(shuō)簡(jiǎn)單也簡(jiǎn)單，用的時(shí)候也有不簡(jiǎn)單的。

其中margin的值可以為負(fù)值，并且為了實(shí)現(xiàn)margin，忽略父級(jí)的padding、border、甚至定位。這在布局上很有用，要注意。

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

比如，div1，嵌套div2。按照直覺(jué)，div1有border和padding，里面的內(nèi)容頂?shù)筋^，不能超過(guò)外面的盒子（div1）吧？可惜不是，只要div2的margin是負(fù)的，如圖浮動(dòng)出了一樣。

下面再看。

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是相對(duì)定位，padding和border都是100px，在谷歌瀏覽器中，div2為絕對(duì)定位，left為0，就是div2在div1中，同時(shí)舉例左邊為0，按照自然直覺(jué)，應(yīng)該是padding后為0，但是實(shí)驗(yàn)得知是，靠近border內(nèi)側(cè)為0，也就是說(shuō)，絕對(duì)定位是跟外面的容器比，但是不看外面容器的padding，而是以border為參考。

?

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

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

總結(jié)

以上是生活随笔為你收集整理的css盒模型中margin很牛逼的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。