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

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

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

我依舊認為css很神奇！很難，比js難......

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

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

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

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

不要告訴我你懂margin

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

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

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

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

margin是什麼？

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

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

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

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

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

先上**：

1

<
html 
xmlns
="">
2<
head
>
3<
title
>
title
>
4<
style 
type
="text/css"
>
5.p 
6.test 
7style
>
8head
>
9<
body
>
10<
div 
class
="p"
>
11<
div 
class
="test"
>
12margin
13div
>
14<
div 
style
=" clear: both;"
>
div>
15div
>
16body
>
17html
>

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

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

其中一位提到了原因：

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

浮動時相對的，第乙個元素對應于父物件而後對應於第乙個物件，所以只有第乙個會出問題。
為元素設定display: inline 可以解決這個問題，是因為inline或者inline-block元素不存在雙邊距問題。
而float: left可以讓inline元素haslayout引發布局，支援高寬

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

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

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

絕對定位框與相對定位框邊距不重合//貌似也有問題
對以上問題，我有點迷糊......

1

<
html 
xmlns
="">
2<
head
>
3<
title
>
title
>
4<
style 
type
="text/css"
>
5body 
6.outer 
7.inner 
8style
>
9head
>
10<
body
>
11<
div 
class
="outer"
>
12<
h1 class
="inner"
>
13             來個測試走
若是我們將**做一點改變：「將外層元素border」去掉；那麼。。
大家發現，一旦缺少屏障，裡面margin: 10px便沒了。。。
所以我在想是不是可以直接給父元素設定乙個padding: 1px便解決問題了
當乙個元素浮動，然後乙個不浮動上浮與之靠近會出現3px的bug。
可以使用一起浮動，或者hack_margin-left: -3px解決，
這個也無法測試了。
今日閱讀就到這裡，下次我們接著學習吧！！！
				
正視CSS 他山之玉可以裝B之細說margin
前言 因為我最開始是搞伺服器端 的，剛開始根本不看好css，甚至認為js抄一抄改一改就完了！由於這種錯誤的認識，所以css功底很水，曾經認為將做成頁面是件很神奇的事情。時至今日，我能輕易將一張圖形成頁面，我還能用js寫出簡單的外掛程式，但有乙個是沒有變化的 我依舊認為css很神奇！很難，比js難.一...