margin-top、padding-top的值是百分比該如何計算

問題:當margin-top、padding-top的值是百分比時,分別是如何計算的?
A 相對父級元素的height,相對自身的height
B 相對最近父級塊級元素的height,相對自身的height
C 相對父級元素的width,相對自身的width
D 相對最近父級塊級元素的width,相對最近父級塊級元素的width

答案:D

可以對元素的margin設置百分數,百分數是相對於父元素的width計算,不管是margin-top/margin-bottom還是margin-left/margin-right。(padding同理)

如果沒有爲元素聲明width,在這種情況下,元素框的總寬度包括外邊距取決於父元素的width,這樣可能得到“流式”頁面,即元素的外邊距會擴大或縮小以適應父元素的實際大小。如果對這個文檔設置樣式,使其元素使用百分數外邊距,當用戶修改瀏覽窗口的寬度時,外邊距會隨之擴大或縮小。

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

CSS權威指南中的解釋:

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章