首頁 > 開發者 > JavaScript
css的負margin外邊距功能簡單介紹，cssmargin
css的負margin外邊距功能簡單介紹:
關於margin外邊距可能絕對多數朋友都不陌生，它的功能就是設定元素的外邊距。
代碼如下:
div{ width:100px; height:100px; margin:10px 5px 15px 20px;}
更多基礎應用可以參閱CSS的margin屬性一章節。
但是與負外邊距的很多功能許多人並不是太瞭解，下面就通過代碼執行個體做一下簡單介紹。
一.對於普通文檔流的影響:
關於文檔流的基本概念可以參閱什麼是文檔流一章節。
也就是說處於文檔流的元素位置跟隨文檔流的變化而變化，先看一個簡單的代碼執行個體:
<!DOCTYPE html><html><head><meta charset=" utf-8"><title>無標題文檔</title><style type="text/css">#antzone{ width:200px; height:100px; background:#ccc;}</style></head><body><div id="antzone"></div>螞蟻部落歡迎您</body></html>
對於上面代碼的表現，應該沒有什麼異議。下面就應用負外邊距，代碼執行個體如下:
<!DOCTYPE html><html><head><meta charset=" utf-8"><title>無標題文檔</title><style type="text/css">#antzone{ width:200px; height:100px; background:#ccc; margin-bottom:-20px;}</style></head><body><div id="antzone"></div>螞蟻部落歡迎您</body></html>
大家看到上面的效果了，div元素的尺寸沒有發生變化，但是文字卻跑到div元素上面去了。
負外邊距對於處於文檔流的元素的影響是這樣的，會使元素在文檔流中佔據的空間發生位移，後面文檔流的內容會填補發生位移的空間，這一點和相對定位是不同的，相對定位即便是發生了位移，但是原來的空間還是保留，所以後面的元素不會填補。上面的代碼margin-bottom:-20px可以是div元素的文檔流回退20px，所以文本就會填補這個回退的空間。
總結如下:在文檔流中，元素的最終邊界是由margin決定的，margin為負的時候就相當於元素的回退，文檔流只認邊界，不會管它的實際尺寸是多少。
代碼執行個體如下:
<!DOCTYPE html><html><head><meta charset=" utf-8"><title>無標題文檔</title><style type="text/css">#box{ width:200px; background:#ccc; overflow:hidden;}#inner{ width:80px; height:100px; background:red;}</style><script>window.onload=function(){ var obt=document.getElementById("bt"); var odiv=document.getElementById("inner"); obt.onclick=function(){ odiv.style.marginBottom="-20px"; }}</script></head><body><div id="box"> <div id="inner"></div></div><input type="button" id="bt" value="查看效果"/></body></html>
上面的代碼中，點擊按鈕可以設定內部div的margin-bottom值為-20px，那麼它在文檔流中就回退20px，那麼外層div元素高度也會減少20px。但是需要注意的是，父元素必須要有overflow:hidden，否則雖然文檔流回退，父元素的高度也減小了，但是沒有效果。
二.負外邊距對寬度的影響:
這裡就不多介紹了，具體可以參閱負外邊距margin對寬度的影響一章節。
三.負外邊距對浮動元素的影響:
這裡就不多介紹了，具體可以參閱負外邊距margin對浮動元素的影響一章節。
四.負外邊距對定位元素的影響:
這裡就不多介紹了，具體可以參閱負外邊距margin對於定位元素的影響一章節。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=18295
更多內容可以參閱:http://www.softwhy.com/divcss/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
