關於margin,padding,absolute,relative對佈局的一些影響和建議

時間 2019-12-08

標籤關於 margin padding absolute relative 佈局一些影響建議欄目 CSS 简体版

原文原文鏈接

---恢復內容開始---html

　　tip：下面的內容網上各類基本的使用狀況不少，我基本不寫了，主要是想到一些特別的使用的時候。時間寶貴，請直接跳後面。佈局

　　一。簡單探討下各個東西的使用狀況（全是以div測試）post

　　　　1）margin（外邊距）學習

　　　　　　1.margin也有想positon同樣的top，left，bottom，right，那麼它的參照物是什麼測試

　　　　　　　①：不涉及postion時，設置了margin屬性的元素是以離他最近的四周的元素位置爲參照物。自己不脫離文檔流，不以自身在文檔流中的位置爲參照。spa

<!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是以離的最近的處於文檔流中的元素定位的。3d

<!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（內邊距）code

　　　　　　　　這個東西怎麼說呢，從正常的思惟上講，它不是在佈局定位，由於它是邊框和內容之間的距離。講道理的話，整個元素應該包括邊框，內邊距，內容。然而呢，由於咱們關注是內容，因此個人確能夠利用內邊距來改變內容的位置，可是我以爲把它當作一個特殊時候用於元素的特效比較好，好比背景圖片能夠延伸到內邊距區，超出內容區。好比它在必定程度上能夠撐大整個元素。在一些特定的特地的想法時，能夠幫着幹不少事。可是在佈局裏我仍是以爲margin好，雖說要照顧元素大小，bug等，由於它更符合我邏輯上佈局定位。而padding，更像是把內容在元素裏恰當的放置一個位置。其實不少時候想盡辦法，仍是有不少方式用2者實現相同的效果。怎麼說呢，看你喜歡，固然有些margin，padding自身獨有的特色，你就要對應狀況用了。好比我能夠用margin讓一個div縮到別的下面，而padding可讓背景漫延出內容區。so，我以爲這都是各自特色的用法。若是有人和我說「你原來是用margin的呀，這樣很差，它要顧及大小，正負值。。。。」我會說「我喜歡margin，而我用margin實現一樣的效果，用它並無讓用戶感到慢了，不一樣了。只是我更習慣用margin。」每一個東西它存在了，沒被5年或者10年時間吞沒了，它就有它的意義。htm

<!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：

　　　　　　寫博客只是用於記錄學習，而後多給走過的路留下點腳印，也許能幫到和我同樣比較菜的新人。固然了，我是很是水，若是路過的大神前輩，多多指教下我，其實對於自適應還有不少想要去了解去學的。