對position定位和margin外邊距的理解

2021-10-14 15:33:34 字數 534 閱讀 8091

class

="a"

>

class

="b"

>

div>

div>

給a或者b設定乙個margin-top,兩個都一起下移。

相鄰的兩個兄弟元素之間的外邊距會塌陷

相鄰的兩個兄弟元素之間的外邊距會取兩者之間的最大值進行合併

對元素的margin設定百分數時,百分數是相對于父元素的width計算

為什麼margin-top/margin-bottom的百分數是相對於width而不是height呢?

css權威指南中的解釋:

我們認為,正常流中的大多數元素都會足夠高以包含其後代元素(包括外邊距),如果乙個元素的上下外邊距時父元素的height的百分數,就可能導致乙個無限迴圈,父元素的height會增加,以適應後代元素上下外邊距的增加,而相應的,上下外邊距因為父元素height的增加也會增加,如此迴圈。

定位和position定位

定位有 普通流定位 浮動定位 相對定位 絕對定位 固定定位 特點普通定位 被稱為文件流定位,是頁面元素預設的定位方式 塊級 從上到下,獨佔一行 行級 從左到右,不獨佔一行 浮動定位 1.浮動元素脫離文件流,未浮動元素上前補位 2.浮動元素會停靠在父級元素的左邊或者右邊,亦或者緊跟其他元素邊緣 3.浮...

Position 絕對定位和相對定位

position絕對定位和相對定位 css中絕對定位和相對定位即position屬性 position static absolute fixed relative static 靜態absolute 絕對定位fixed 固定relative 相對定位 static 無特殊定位,物件遵循html定位...

position 相對定位和絕對定位

定位標籤 position 包含屬性 relative 相對 absolute 絕對 1.position relative 如果對乙個元素進行相對定位,首先它將出現在它所在的位置上。然後通過設定垂直或水平位置,讓這個元素 相對於 它的原始起點進行移動。再一點,相對定位時,無論是否進行移動,元素仍然...