CSS中margin常見問(wèn)題解決方案
margin為CSS中非常常用的一個(gè)屬性，其所包含的內(nèi)容也是很多的，這里向大家描述一下CSS中margin常見問(wèn)題及解決方案。
CSS 中margin屬性常見問(wèn)題
1.IE6下雙邊距問(wèn)題
margin雙布局可以說(shuō)是IE6下經(jīng)典的bug之一。產(chǎn)生的條件是：block元素+浮動(dòng)+margin。
還記得我自認(rèn)為會(huì)CSS的那個(gè)階段，這個(gè)問(wèn)題我經(jīng)常碰到，會(huì)很熟練的用hack解決這個(gè)問(wèn)題，當(dāng)時(shí)還自以為是，洋洋得意。現(xiàn)在看來(lái)，當(dāng)時(shí)的自己嫩的就像個(gè)豆芽菜。真正CSS厲害的人基本上是不會(huì)碰到這個(gè)bug的，如果您時(shí)不時(shí)遇到這個(gè)bug，說(shuō)明您的CSS還有好一段路要走。
我的體會(huì)是越少的浮動(dòng)，就會(huì)越少的代碼，會(huì)有更靈活的頁(yè)面，會(huì)有擴(kuò)展性更強(qiáng)的頁(yè)面。這不多說(shuō)，歸結(jié)為到一定水平了，浮動(dòng)會(huì)用的較少。另外，您也會(huì)避免使用浮動(dòng)+margin的用法。所以，越后來(lái)越不易遇到這種bug。
這里提一下解決方法，使用hack我是不推薦的，使用hack屬于比初學(xué)者稍高一點(diǎn)的層次水平。一個(gè)頁(yè)面，沒(méi)有一個(gè)hack，但是各個(gè)瀏覽器下表現(xiàn)一致，這才是水平。使用display:inline;可以解決這個(gè)問(wèn)題。
而為什么display:inline可以解決這個(gè)雙邊距bug，首先是inline元素或inline-block元素是不存在雙邊距問(wèn)題的。然后，float:left等浮動(dòng)屬性可以讓inline元素haslayout，會(huì)讓inline元素表現(xiàn)得跟inline-block元素的特性一樣，支持高寬，垂直margin和padding等，所以divclass的所有樣式可以用在這個(gè)displayinline的元素上。
如果您是IE6瀏覽器，可以狠狠地點(diǎn)擊這里進(jìn)入demo實(shí)例頁(yè)面了解更多信息
2.margin重疊的問(wèn)題
CSS2.0規(guī)范對(duì)margin重疊有如下的描述：
1.水平邊距永遠(yuǎn)不會(huì)重合。
2.垂直邊距可能在特定的框之間重合：
◆常規(guī)流向中兩個(gè)或多個(gè)塊框相鄰的垂直邊距會(huì)重合。結(jié)果的邊距寬度是相鄰邊距寬度中較大的值。如果出現(xiàn)負(fù)邊距，則在最大的正邊距中減去絕對(duì)值最大的負(fù)邊距。如果沒(méi)有正邊距，則從零中減去絕對(duì)值最大的負(fù)邊距。
◆在一個(gè)浮動(dòng)框和其它框之間的垂直邊距不重合。//這句話是不夠嚴(yán)謹(jǐn)，在IE瀏覽器下確實(shí)如此，但是Firefox等瀏覽器下依舊重合。
◆“絕對(duì)定位的框”與“相對(duì)定位的框”邊距不重合。//這句話有待斟酌，我在Firefox等瀏覽器下測(cè)試，效果貌似很糟糕的。
margin重疊的問(wèn)題其實(shí)并不是經(jīng)常遇到，有時(shí)即使遇到造成的影響也很小，或是通過(guò)其他一些修改就可以輕松解決這個(gè)問(wèn)題了。我也是今天才好好的研究了下margin重疊的問(wèn)題，當(dāng)重疊較多時(shí)，沒(méi)有找到什么好的方法解決這個(gè)問(wèn)題，要不IE瀏覽器依舊頑固不化，要么Firefox表現(xiàn)差強(qiáng)人意。可以自己后來(lái)又一想，既然知道會(huì)發(fā)生margin重疊，寫代碼的時(shí)候勢(shì)必會(huì)注意的，也就不會(huì)出現(xiàn)這些重疊的問(wèn)題的，所以絞盡腦汁想一個(gè)比較完美的解決方法是沒(méi)有必要的。最好的解決margin重疊問(wèn)題的方法就是了解它，避免它。
每枚硬幣都有正反面，其實(shí)margin重疊也是又它的用處的。當(dāng)垂直方向上有多個(gè)模塊時(shí)，margin重疊正好可以讓上中下都有一個(gè)margin值，而且由于margin重疊，所以margin值的表現(xiàn)都是一樣的。例如a,b,c三個(gè)垂直方向上的模塊都有margin:10px0;則最后的表現(xiàn)結(jié)果是（如果其上下沒(méi)有浮動(dòng)元素干擾的話）：上，中上，中下，下四處有10像素的間距。正好完美定位。
關(guān)于margin重疊，我寫了個(gè)demo實(shí)例頁(yè)面，您可以狠狠地單擊這里獲取更多有用的些信息，包括些解決重疊問(wèn)題的方法等。
3.margin不起作用的情況
margin不起作用多出現(xiàn)在Firefox瀏覽器下，最常見的原因就是浮動(dòng)影響，還是就是margin重疊，或者是padding與margin的重疊。關(guān)于這個(gè)，我就指說(shuō)這么多了。因?yàn)閙argin不起作用，可以使用padding代替，或者再添加一層標(biāo)簽等方法解決，不太難，沒(méi)有多少可說(shuō)的。
【編輯推薦】
