【正視CSS】他山之玉可以裝B之細說margin

前言

因為我最開始是搞伺服器端程式碼的，剛開始根本不看好CSS，甚至認為js抄一抄改一改就完了！由於這種錯誤的認識，所以CSS功底很水，曾經認為將圖片做成頁面是件很神奇的事情。

時至今日，我能輕易將一張圖形成頁面，我還能用js寫出簡單的外掛，但有一個是沒有變化的：

我依舊認為CSS很神奇！很難，比js難……

一方面是自己佈局的專案經驗不足，另一方面就是沒有經過系統的學習，所以這塊仍然是我的短板，是問題就需要突破，我不行但有人行！

我最近領悟了一個學習方法，針對某個問題，蒐集幾篇高質量文章閱讀，然後吸收，做實驗，形成文章！這樣的學習效果我感覺針對還行！

所以這次用到我的短板CSS上試試！

引用資料

css margin的相關屬性，問題及應用

css中padding、margin兩個重要屬性的詳細介紹及舉例說明

不要告訴我你懂margin

隆重介紹·張鑫旭

世界上有那麼一種人，屬於他不認識我，但我認識他，他影響著我，但他還是不認識我！其中張鑫旭就是這樣一個人！

當我前段時間比較迷茫時，不經意間看見了他的部落格，於是我便深深的愛上了他！因為從他的行文中，我感受到了我丟失的專注與細心，特別是他一句話點醒了我，我才為自己設立目標“兩年成為國內優秀前端工程師”的目標，所以在此感謝旭哥，真乃指路明燈啊！

在此推薦其部落格：http://www.zhangxinxu.com

盒模型 Box Model

要說margin，必定牽扯到盒模型，我這裡不要臉的偷了兩個圖：

請大家注意看第一張圖！這張圖是我見過最棒的一張圖了，他可以很好的解釋塊級元素中margin、padding、background等的關係，畫圖者神人也！

Margin是什麼？

CSS邊距屬性定義元素周圍的空間。通過使用單獨的屬性，可以對上右下左外邊距進行設定。

元素周圍生成的額外空白區，該空白區是指其它元素不能出現且父元素背景可見區域

上面的定義怎麼讀怎麼繞口。。。但基本也就是這個意思，其實margin就是用來將元素隔開罷了。

現在我們來看看margin會為我們的網頁帶來些什麼問題呢？

IE6雙邊距問題

產生條件：塊級元素+float+margin

比如：當給父元素內第一個浮動元素設定margin-left（元素float:left）或margin-right（元素float:right）時margin加倍。

先上程式碼：

複製程式碼

1 <html xmlns=”http://www.w3.org/1999/xhtml”>

2 <head>

3 <title></title>

4 <style type=”text/css”>

5 .p { border: 1px solid black;}

6 .test { background: gray; margin: 10px; float: left;}

7 </style>

8 </head>

9 <body>

10 <div class=”p”>

11 <div class=”test”>

12 margin

13 </div>

14 <div style=” clear: both;”></div>

15 </div>

16 </body>

17 </html>

複製程式碼

本想簡簡單單做個試驗就算了，結果一float我父級元素就“坍塌”了，這裡還必須處理一番呢。

汗！由於我沒有IE6，這裡看不到bug圖呢。。。這裡只好又偷圖了。。。

大概是以上樣子，我們來看看各位大哥是怎麼樣解決的呢？

其中一位提到了原因：

塊級元素設定浮動並對其設定外邊距，就會出現這種情況，這種情況只會是第一個元素，後面就不會出現，原因是：

浮動時相對的，第一個元素對應於父物件而後對應於第一個物件，所以只有第一個會出問題。

為元素設定display: inline 可以解決這個問題，是因為inline或者inline-block元素不存在雙邊距問題。

而float: left可以讓inline元素haslayout引釋出局，支援高寬

PS：我感覺這個不像是原因而是解決的辦法了。。。

最後我兩位大哥對這個的解散都是一樣的，其中旭哥稍微提了下少用float，這個問題便不了了之啦。。。

margin重疊問題

margin有這樣一個屬性，水平元素的margin是不會重合的，但是上下元素會發生重合，並且取較大者。

在漂浮框和其它框之間的垂直邊距不重合//ie可以，其它不行

絕對定位框與相對定位框邊距不重合//貌似也有問題

對以上問題，我有點迷糊……

這裡要提到的是一個實際遇到的問題：

複製程式碼

1 <html xmlns=”http://www.w3.org/1999/xhtml”>

2 <head>

3 <title></title>

4 <style type=”text/css”>

5 body { background: #ECECEC; }

6 .outer { background: white; border: 1px solid #CCCCCC; width: 300px; }

7 .inner { margin: 10px; padding: 8px; background: none repeat scroll 0 0 #1C87D5; color: white;}

8 </style>

9 </head>

10 <body>

11 <div class=”outer”>

12 <h1 class=”inner”>

13 來個測試走</h1>

14 </div>

15 </body>

16 </html>

複製程式碼

若是我們將程式碼做一點改變：“將外層元素border”去掉；那麼。。

大家發現，一旦缺少屏障，裡面margin: 10px便沒了。。。

所以我在想是不是可以直接給父元素設定一個padding: 1px便解決問題了

IE6 漂浮元素3px間距bug

當一個元素浮動，然後一個不浮動上浮與之靠近會出現3px的bug。

可以使用一起浮動，或者hack_margin-left: -3px解決，

這個也無法測試了。

結語

今日閱讀就到這裡，下次我們接著學習吧！！！

您可以考慮給小釵發個小額微信紅包以資鼓勵

本文轉自葉小釵部落格園部落格，原文連結：http://www.cnblogs.com/yexiaochai/archive/2013/04/27/3047391.html，如需轉載請自行聯絡原作者

【正視CSS】他山之玉可以裝B之細說margin

相關文章