起因:在進行bootstrap的.navbar-brand內(nèi)文字設(shè)置垂直居中時采用line-height=高度,無法居中,發(fā)現(xiàn)源碼.navbar-brand 設(shè)置了 padding: 15px 15px;(默認導(dǎo)航高度為50),于是居中應(yīng)該是等于高度-30,解決過程中寫了幾個div用于檢測問題,結(jié)果遇到了以下問題,經(jīng)過數(shù)小時的研究(時間大多花費在百度與谷歌上,以及研究原因上),于是寫下這篇文章做個總結(jié),加深個人記憶。
我寫了兩個div,從上往下分別標記為div1和div2,設(shè)置了相同的margin與高寬,然后給div1設(shè)置左浮動。那么根據(jù)我薄弱的基礎(chǔ)判斷,這時候刷新頁面應(yīng)該出現(xiàn)的是兩個div重疊在一起,只顯示一個div,但是結(jié)果出現(xiàn)了偏差,兩個div并沒有疊加顯示,并且div1出現(xiàn)在了div2下方。
(F5后的顯示)
預(yù)期的結(jié)果并沒有出現(xiàn),然后開始排查寫的代碼,發(fā)現(xiàn)問題出現(xiàn)在margin上,清除div的maring后元素顯示正常,不會出現(xiàn)錯位。
(清除了margin之后的正常狀態(tài))
由于margin-left是正常的,所以顯然是margin-top的設(shè)置出現(xiàn)了些問題,于是推理查找問題,n分鐘后得出如下結(jié)論
正常文檔流狀態(tài)下,div1浮動,脫離了文檔流,然后div2這時候依舊處在文檔流狀態(tài),于是向上移動至div1浮動前的位置,這時候body的位置發(fā)生改變,向下移動了div2設(shè)置的margin-top的距離,(又一個問題出現(xiàn)了,為什么div2設(shè)置的margin能夠改變body的位置,或者說是父元素的位置!好吧,這個問題經(jīng)過百度與測試后發(fā)現(xiàn)是個固有問題,在文章末尾做詳細說明)。
(藍色部分是body)
而div1這時候處于浮動狀態(tài),由于同樣設(shè)置了margin,所以浮動后同樣會改變位置,div1浮動后根據(jù)body的位置重新進行定位,所以div1浮動后,兩個div的位置不會重合。(解決方法-給body添加padding-top,或者border——詳情見結(jié)尾。)
(可以很明顯看出div2根據(jù)body進行了margin定位)
兩個div的css如下:
{ :; :; :; :; :; } { :; :; :; :; }