margin和padding值為百分數 時的規則

2021-09-12 14:28:34 字數 553 閱讀 6706

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

如果沒有為元素宣告width,在這種情況下,元素框的總寬度包括外邊距取決於父元素的width,這樣可能得到「流式」頁面,即元素的外邊距會擴大或縮小以適應父元素的實際大小。如果對這個文件設定樣式,使其元素使用百分數外邊距,當使用者修改瀏覽視窗的寬度時,外邊距會隨之擴大或縮小。

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

css權威指南中的解釋:

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

margin和padding之我見

採用div css排版的話,如果有float屬性,在ie中選中文字的時候,經常會出現把一整個div全部選中,非常難看 而有時候又不會出現這種情況,自己是不是遇到過了?呵呵,奇怪吧,我來給你講.其實原因很簡單,主要看你做事是不是細心.這個就是margin和padding的區別了.如果你不知道margi...

margin和padding 的區別

經常會看到這樣的布局android layout margintop 1.0dip 比較迷惑。查了下資料,有篇文章講的不錯,拿來一起分享!就拿layout margintop和paddingtop為例。layout margintop是從當前設定的控制項的頭部,開始向上移動,直到碰到上乙個控制項 父...

margin和padding的區別

padding 10px 0 10px 20px,上10 右0 下10 左20 margin 10px 0 10px 20px,上10 右0 下10 左20 四個值順時針旋轉 目前web2.0已經越來被人們認可,因為喜歡搞web開發的人員不得不硬著頭皮去學習web2.0的標準,其中很重要的一條就是新...