建站
咨詢
售后
建站咨詢
新聞中心
margin為CSS中非常常用的一個屬性，其所包含的內容也是很多的，這里向大家描述一下CSS中margin常見問題及解決方案。
創(chuàng)新互聯專業(yè)為企業(yè)提供臨滄網站建設、臨滄做網站、臨滄網站設計、臨滄網站制作等企業(yè)網站建設、網頁設計與制作、臨滄企業(yè)網站模板建站服務，10多年臨滄做網站經驗，不只是建網站，更提供有價值的思路和整體網絡服務。
CSS 中margin屬性常見問題
1.IE6下雙邊距問題
margin雙布局可以說是IE6下經典的bug之一。產生的條件是：block元素+浮動+margin。
還記得我自認為會CSS的那個階段，這個問題我經常碰到，會很熟練的用hack解決這個問題，當時還自以為是，洋洋得意?，F在看來，當時的自己嫩的就像個豆芽菜。真正CSS厲害的人基本上是不會碰到這個bug的，如果您時不時遇到這個bug，說明您的CSS還有好一段路要走。
我的體會是越少的浮動，就會越少的代碼，會有更靈活的頁面，會有擴展性更強的頁面。這不多說，歸結為到一定水平了，浮動會用的較少。另外，您也會避免使用浮動+margin的用法。所以，越后來越不易遇到這種bug。
這里提一下解決方法，使用hack我是不推薦的，使用hack屬于比初學者稍高一點的層次水平。一個頁面，沒有一個hack，但是各個瀏覽器下表現一致，這才是水平。使用display:inline;可以解決這個問題。
而為什么display:inline可以解決這個雙邊距bug，首先是inline元素或inline-block元素是不存在雙邊距問題的。然后，float:left等浮動屬性可以讓inline元素haslayout，會讓inline元素表現得跟inline-block元素的特性一樣，支持高寬，垂直margin和padding等，所以divclass的所有樣式可以用在這個displayinline的元素上。
如果您是IE6瀏覽器，可以狠狠地點擊這里進入demo實例頁面了解更多信息
2.margin重疊的問題
CSS2.0規(guī)范對margin重疊有如下的描述：
1.水平邊距永遠不會重合。
2.垂直邊距可能在特定的框之間重合：
◆常規(guī)流向中兩個或多個塊框相鄰的垂直邊距會重合。結果的邊距寬度是相鄰邊距寬度中較大的值。如果出現負邊距，則在最大的正邊距中減去絕對值最大的負邊距。如果沒有正邊距，則從零中減去絕對值最大的負邊距。
◆在一個浮動框和其它框之間的垂直邊距不重合。//這句話是不夠嚴謹，在IE瀏覽器下確實如此，但是Firefox等瀏覽器下依舊重合。
◆“絕對定位的框”與“相對定位的框”邊距不重合。//這句話有待斟酌，我在Firefox等瀏覽器下測試，效果貌似很糟糕的。
margin重疊的問題其實并不是經常遇到，有時即使遇到造成的影響也很小，或是通過其他一些修改就可以輕松解決這個問題了。我也是今天才好好的研究了下margin重疊的問題，當重疊較多時，沒有找到什么好的方法解決這個問題，要不IE瀏覽器依舊頑固不化，要么Firefox表現差強人意?？梢宰约汉髞碛忠幌?，既然知道會發(fā)生margin重疊，寫代碼的時候勢必會注意的，也就不會出現這些重疊的問題的，所以絞盡腦汁想一個比較完美的解決方法是沒有必要的。最好的解決margin重疊問題的方法就是了解它，避免它。
每枚硬幣都有正反面，其實margin重疊也是又它的用處的。當垂直方向上有多個模塊時，margin重疊正好可以讓上中下都有一個margin值，而且由于margin重疊，所以margin值的表現都是一樣的。例如a,b,c三個垂直方向上的模塊都有margin:10px0;則最后的表現結果是（如果其上下沒有浮動元素干擾的話）：上，中上，中下，下四處有10像素的間距。正好完美定位。
關于margin重疊，我寫了個demo實例頁面，您可以狠狠地單擊這里獲取更多有用的些信息，包括些解決重疊問題的方法等。
3.margin不起作用的情況
margin不起作用多出現在Firefox瀏覽器下，最常見的原因就是浮動影響，還是就是margin重疊，或者是padding與margin的重疊。關于這個，我就指說這么多了。因為margin不起作用，可以使用padding代替，或者再添加一層標簽等方法解決，不太難，沒有多少可說的。
名稱欄目：CSS中margin常見問題解決方案
文章出自：http://www.5511xx.com/article/dppjdop.html
