CSS之絕對定位的位置以及子元素在父容器的居中顯示

2021-10-05 03:49:29 字數 620 閱讀 8101

元素開啟了絕對定位:

水平布局:

left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right

=包含塊的寬度

此時規則和之前一樣,只是多了left和right這兩個值

當發生過度約束:

如果9個值沒有auto,則自動調整right值以使等式成立

如果有auto,則自動調整auto值以使等式成立

可設定auto的值:

margin width left right

垂直方向布局也必須滿足等式:

topt+margin-top+border-top+padding-top+height+padding-bottom+border-bottom++margin-bottom+bottom

=包含塊的高度

通過以上規則,可以實現使得子元素在父容器中居中顯示(水平方向和垂直方向)``

demo:

"box1">

"box2">

CSS之絕對定位

絕對定位 當元素的position屬性設定為absolute後,則元素將開啟絕對定位 絕對定位的特點 1.開啟絕對定位的元素,如果不設定元素的偏移量元素將不會發生變化 2.開啟絕對定位後,元素將從文件流中脫離出來 3.絕對定位會改變元素的性質,行內變成塊,塊的高度被內容撐開 4.絕對定位會使元素提公...

CSS 相對定位和絕對位置

設定為相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀,它原本所佔的空間仍保留。相對定位是乙個非常容易掌握的概念。如果對乙個元素進行相對定位,它將出現在它所在的位置上。然後,可以通過設定垂直或水平位置,讓這個元素 相對於 它的起點進行移動。如果將 top 設定為 20px,那麼框將在原位...

css中的定位以及絕對定位和相對定位的區別

一 絕對定位 position absolute 絕對定位 絕對定位是相對於元素最近的已定位的祖先元素 即是設定了絕對定位或者相對定位的祖先元素 如果元素沒有已定位的祖先元素,那麼它的位置則是相對於最初的包含塊 body 絕對定位本身與文件流無關,因此不佔空間,普通文件流中的元素的布局就當絕對定位的...