1. 程式人生 > >margin-top、top、以及position的總結

margin-top、top、以及position的總結

子元素的margin-top屬性傳遞給父元素的問題   

  這個問題發生的原因是根據規範,一個盒子如果沒有上補白(padding-top)和上邊框(border-top),那麼這個盒子的上邊距會  和其內部文件流中的第一個子元素的上邊距重疊。

一個盒子如果沒有上補白(padding-top)和上邊框(border-top),那麼這個盒子的上邊距會和其內部文件流中的第一個子元素的上邊距重疊。

   再說白點就是:父元素的第一個子元素的上邊距margin-top如果碰不到有效的border或者padding.就會不斷一層一層的找自    己“領導”(父元素,祖先元素)的麻煩。只要給領導設定個有效的 border或者padding就可以有效的管制這個目無領導的  margin 它越級,假傳聖旨,把自己的margin當領導的margin執行。

margin-top與top的區別

1、使用top、bottom、left、right的前提是本元素position被定義為relative、absolute和fixed中的一種,不能是static

2、使用margin-top、margin-bottom、margin-left、margin-right的元素的position可以是static、relative、absolute和fixed

position各個屬性值區分

1、本元素使用position的absolute時,margin-top以及top等屬性表示相對父元素中position被定義為relative、absolute和fixed中的一種,如果直接父元素中沒有被定義為relative、absolute和fixed的,那麼一次向上尋找,直到body為止

2、本元素使用position的relative時,margin-top以及top等屬性首先找相鄰的元素,如果相鄰的元素中有被定義為relative或者static的元素,則相對相鄰的元素偏移,如果相鄰元素沒有被定義為relative和static,則相對父元素,父元素可以是static、relative、absolute、fixed的任意一種,其中要注意本元素在四個方向上的相鄰元素是不同的!

3、本元素使用position的fixed時,margin-top以及top等屬性表示相對body

4、static很少使用

總結起來:absolute是相對父元素的;relative首先是相對相鄰元素,如果相鄰元素不滿足條件再相對父元素;fixed是相對body的