---恢復內容開始---
tip：下面的內容網上各種基本的使用情況很多，我基本不寫了，主要是想到一些特別的使用的時候。時間寶貴，請直接跳后面。
一。簡單探討下各個東西的使用情況（全是以div測試）
1）margin（外邊距）
1.margin也有想positon一樣的top，left，bottom，right，那么它的參照物是什么
①：不涉及postion時，設置了margin屬性的元素是以離他最近的四周的元素位置為參照物。本身不脫離文檔流，不以自身在文檔流中的位置為參照。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="father" style="width:600px;height:800px;margin-top:100px;border:2px solid black;"> <div id="son1" style="width:200px;height:100px;border:2px solid red;"></div> <div id="son2" style="width:200px;height:100px;margin-top:100px;margin-bottom:50px;border:2px solid blue;"></div> <div id="son3" style="width:200px;height:100px;border:2px solid pink;"></div> </div> </body> </html>
②有postion參與的情況下，1.離margin最近的元素的position：relative，會對margin產生影響，margin是根據relative的元素所在文檔流的位置來定位的（而不是視覺上的它位移過后的位置）。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="father" style="width:600px;height:800px;border:2px solid black;"> <div id="son1" style="width:200px;height:100px;border:2px solid red;position:relative;top:100px;"></div> <div id="son2" style="width:200px;height:100px;border:2px solid blue;margin-top:100px;margin-bottom:50px;"></div> <div id="son3" style="width:200px;height:100px;border:2px solid pink;"></div> </div> </body> </html>
③position參與的情況下，margin周圍的元素potion為absolute，margin是以離的最近的處於文檔流中的元素定位的。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="father" style="width:600px;height:800px;border:2px solid black;position:relative;"> <div id="son1" style="width:200px;height:100px;border:2px solid red;position:absolute;top:98px;"></div> <div id="son2" style="width:200px;height:100px;border:2px solid blue;margin-top:100px;margin-bottom:50px;"></div> <div id="son3" style="width:200px;height:100px;border:2px solid pink;"></div> </div> </body> </html>
2）padding（內邊距）
這個東西怎么說呢，從正常的思維上講，它不是在布局定位，因為它是邊框和內容之間的距離。講道理的話，整個元素應該包括邊框，內邊距，內容。然而呢，因為我們關注是內容，所以我的確可以利用內邊距來改變內容的位置，但是我覺得把它當做一個特殊時候用於元素的特效比較好，比如背景圖片可以延伸到內邊距區，超出內容區。比如它在一定程度上可以撐大整個元素。在一些特定的特意的想法時，可以幫着干很多事。但是在布局里我還是覺得margin好，雖然說要照顧元素大小，bug等，因為它更符合我邏輯上布局定位。而padding，更像是把內容在元素里恰當的放置一個位置。其實很多時候想盡辦法，還是有很多方式用2者實現相同的效果。怎么說呢，看你喜歡，當然有些margin，padding自身獨有的特點，你就要對應情況用了。比如我可以用margin讓一個div縮到別的下面，而padding可以讓背景漫延出內容區。so，我覺得這都是各自特點的用法。如果有人和我說“你原來是用margin的呀，這樣不好，它要顧及大小，正負值。。。。”我會說“我喜歡margin，而我用margin實現同樣的效果，用它並沒有讓用戶感到慢了，不同了。只是我更習慣用margin。”每個東西它存在了，沒被5年或者10年時間吞沒了，它就有它的意義。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="father" style="width:600px;height:800px;border:2px solid black;"> <div id="son1" style="width:200px;height:100px;border:2px solid red;"></div> <div id="son2" style="width:200px;height:100px;border:2px solid blue;padding-top:200px;"> <label style="border:1px solid green;">這是內容區</label> </div> <div id="son3" style="width:200px;height:100px;border:2px solid pink;"></div> </div> </body> </html>
3）至於absolute，relative我就不測試了，這個網上的解釋多少都數不清了。布局時多注意relative是自身在文檔流中的位置，而不是視覺上理論上所看到想象的位置。（同個元素里有多個同級的relative）
二。一些思考
1）能多考慮自適應的，應更多地為自適應思考下，怎么更好的布局一個元素。
2）我個人覺得盡可能地少用position，特別是absolute和relative，他們就特別會惹事知道嗎。absolute本身的位置沒掉了，要是復雜的布局可能就會讓其他元素布局亂了，而他自己呢，像個幽靈一樣，很隨意的浮在文檔流上，卻又是定死在一個地方。然后還有relative，它自己的本身還是在文檔流占着位置，別人的位置是不會受到影響，但就是它這個不會消失多少惡心。我們得想象着它在哪里還占着位置，位置是它的高寬，我們下面或者附近元素的定位要去依據想象那個空白的位置去做布局，因為視覺上給你的是它移動過的位置，而像很多情況，比如margin，比如relative它自己，都是依據文檔流中它的位置來定位的，布局復雜的話設計和維護多少折騰人。
3）absolute太自由了，要用個relative把它套起來，這樣不同情況下不會說讓那個absolute亂跑，因為relative本身在文檔流，relative移動是根據本身來的，而子absolute是根據父relative來的，這樣這里的absolute是間接的依據文檔流的位置來定位的，哎，這就很舒服，不太容易屏幕，布局什么的變了下，就瞎跑。
4）元素布局出現很奇怪的樣子，和我們想象中的不一樣了。不要急，要耐心，出去走下，發個呆。都是很可以的。
①你先從最里面的東西檢查，比如div很多個嵌套，你先看最最最里面的那個div里面的元素，檢查語法問題。padding是不是少了個d寫成了pading，position是不是寫成了postion，中英文字符等等。
②最里面的元素和它的父級之間在目前加的布局樣式下，理論上是不是應該想象中的那個樣子。（把那個父子級單獨拿出來測試下，是不是正常的。）
③父子級沒問題，不是檢查祖父級和父級之間，而是去檢查父級與父級之間有沒有毛病。
④沒毛病的話，再去檢查祖父級，重復②③。
⑤如果還找不到毛病的話，我也不知道該怎么辦了，發個呆先?點個外賣？打會游戲？.....總之先別讓自己那么煩
6）其他的比如%，em等也對自適應更好了。。。
5）其他有些想不起來了，昨天太晚了，思考的也很亂。。。
note：
寫博客只是用於記錄學習，然后多給走過的路留下點腳印，也許能幫到和我一樣比較菜的新人。當然了，我是非常水，如果路過的大神前輩，多多指教下我，其實對於自適應還有很多想要去了解去學的。