国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

margin/padding百分比值的計算

jsummer / 3136人閱讀

摘要：還有一種說法是根本原因并不是因為死循環。，總而言之就是在默認的水平文檔流方向下，和屬性的垂直方向的百分比值都是相對于父元素寬度計算的。表示元素的高度為寬度的一半。

1、百分比介紹

一般元素的寬度用百分比值表示時，元素的總寬度包括外邊距取決于父元素的width，這樣可能得到“流式”頁面，即元素的外邊距會擴大或縮小以適應父元素的實際大小。如果對這個文檔設置該樣式，使其子元素使用百分數外邊距，當用戶修改瀏覽窗口的寬度時，外邊距會隨之擴大或縮小。

margin-right/margin-left的百分比值是相對于父元素的寬度來計算的，這很好理解；而margin-top/margin-bottom為什么也是以父元素的width為參照物的呢？

2、為什么呢？

CSS權威指南中的解釋：若是相對于父元素的高度計算會形成死循環。
“我們認為，正常流中的大多數元素都會足夠高以包含其后代元素（包括外邊距），如果一個元素的上下外邊距是父元素的height的百分數，就可能導致一個無限循環，父元素的height會增加，以適應后代元素上下外邊距的增加，而相應的，上下外邊距因為父元素height的增加也會增加，形成無限循環?！?/em>

還有一種說法是根本原因并不是因為死循環。例如zhangxinxu認為相對于 height 計算，大多數情況下計算值都是 0，跟擺設沒什么 區別，還不如相對寬度計算，因為 CSS 默認的是水平流，計算值一直會有效，而且我們還可以 利用這一特性實現一些有意思的布局效果。也就是面向場景和需求設計，這種設計可以讓我們輕松實現自適應的等比例矩形效果。

Anyway，總而言之就是：

在默認的水平文檔流方向下，CSS margin和padding屬性的垂直方向的百分比值都是相對于父元素寬度計算的。
3、小栗子 

  
1




#container{ 
  padding-top: 50%;  // margin-top: 50%;
  background-color: pink;
}

div中沒有內容時，實現的是一個寬高為1:2的小矩形。padding-top: 50%;表示元素的高度為寬度的一半。padding-top: 100%; 可實現寬高為1:1的小矩形。（改為padding: 50%`，實現的是一個寬高1:1的小矩形，因為50%+50%=100%；）

從盒子模型可以看出，雖然容器的內容高度為0，但由于有了跟內容寬度一致的padding，因此整體視覺效果上像是被撐開了。

使用方法： padding-top用來設置元素的寬高比例；該元素在父元素寬度變化的過程中將保持自身固定的寬高比。

4、應用

對于絕大多數都布局，我們并不要求非要比例固定，但是有一種情況例外，那就是圖片，因為圖片原始尺寸它是固定的。在傳統的固定寬度的布局下，我們會通過給圖片設定具體的寬度和高度值，來保證我們的圖片占據區域穩固；但是在移動端或者在響應式開發情況下，圖片最終展現的寬度很可能是不確定的。

此時需要的不是對圖片進行固定尺寸設定，而是比例設定。為了維持圖片的寬高比固定，即保持原來的尺寸比不變，要做到元素高度隨著元素的進行自適應變化。

對于復雜布局，如果圖片的寬度是不固定的自適應的，我們通常會想到這么一個取巧的做法，就是只設定圖片的寬度例如img { width: 100%; }，圖片的高度不進行限定，由圖片的內容去撐開，這樣會出現圖片占據的高度有一個從0到計算高度的圖片變化，視覺上會有明顯的元素跳動，代碼層面會有布局重計算。即使圖片加載速度很快，容器在圖片加載前后都會有一個變型的過程，也就是俗稱的“閃爍”，而如果圖片加載不出來，整體布局就更是難看了。

所以對圖片高寬都進行限定還是有必要的，但是同時要保證寬度自適應。

給子元素/偽元素設置margin/padding撐開容器

由于添加子元素與HTML語義化相悖，因此更推薦使用偽元素(:after)來實現此方案。


  




#container {
  position: relative;
  background-color: pink;
  overflow: hidden;  // 當使用margin-top需要觸發BFC消除與其他元素可能發生margin折疊的問題
}
.placeholder:after {
  content: " ";
  display: block;
  margin-top: 100%; 
}
容器內部如何添加內容

那么，在撐開容器后，如何給容器添加內容（圖片、文本等）呢？
利用position: absolute;


  



#container {
  position: relative;
  background-color: pink;
  overflow: hidden; 
}
.placeholder:after {
  content: " ";
  display: block;
  margin-top: 100%; 
} 
img {
  position: absolute;
  top: 0;
  width: 100%;
}
References

CSS百分比padding實現比例固定圖片自適應布局
巧用margin/padding的百分比值實現高度自適應（多用于占位，避免閃爍）

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113863.html

相關文章

  • margin/padding百分比值的計算

    摘要：還有一種說法是根本原因并不是因為死循環。，總而言之就是在默認的水平文檔流方向下，和屬性的垂直方向的百分比值都是相對于父元素寬度計算的。表示元素的高度為寬度的一半。 1、百分比介紹 一般元素的寬度用百分比值表示時，元素的總寬度包括外邊距取決于父元素的width，這樣可能得到流式頁面，即元素的外邊距會擴大或縮小以適應父元素的實際大小。如果對這個文檔設置該樣式，使其子元素使用百分數外邊距，當...

    Pikachu 評論0 收藏0

  • 巧用margin/padding的百分比值實現高度自適應（多用于占位，避免閃爍）

    摘要：那想要優化這一點，唯一的方法就是利用內容高度來撐開而非，這個方案跟消除浮動所用的方案非常相似給容器添加一個子元素偽元素，并把子元素偽元素的設為，使其實際高度相當于容器的寬度，如此一來，便能把容器的高度撐至與寬度一致了。 一個基礎卻又容易混淆的css知識點 本文依賴于一個基礎卻又容易混淆的css知識點：當margin/padding取形式為百分比的值時，無論是left/right，還是t...

    wenzi 評論0 收藏0

  • 詳述css中的百分比值

    摘要：很多屬性的取值都可以是百分比值。這就是百分比值的意義。可用百分比值的常見屬性寬和高在使用百分比值時，其參照都是元素的包含塊，詳情。百分比值的繼承請注意，當百分比值用于可繼承屬性時，只有結合參照值計算后的絕對值會被繼承，而不是百分比值本身。 很多css屬性的取值都可以是百分比值。雖然形式上來說，百分比值都是數字后跟%的形式（注意數字和%之間不可以有空格），但在不同的使用場合下，其意義會有...

    flyer_dev 評論0 收藏0

  • 行內格式化上下文(Inline formatting contexts)

    摘要：如果該屬性值為，用戶代理可能會拉伸行內盒不包括和盒里的空白和字間距與，，行內盒一個是一個特殊的行內級盒，其內容參與了它的包含行內格式化上下文當一個超出一個的寬度時，它會被分成幾個盒，并且這些盒會跨多分布。 IFC布局規則: 在一個行內格式化上下文中，盒是一個接一個水平放置的，從包含塊的頂部開始 這些盒之間的水平margin，border和padding都有效 盒可能以不同的方式豎直對...

    impig33 評論0 收藏0

  • CSS屬性中經常出現的百分比

    摘要：絕對單位英寸磅相對單位與元素字號掛鉤與元素字體的高度掛鉤與根元素字號掛鉤與像素掛鉤另一屬性值的百分比。定義基于父元素寬度的百分比的縮進。參考權威教程節樣式可以使用百分比的屬性總結淺析屬性之中經常出現的百分比 起源：一道面試題（貓眼電影） 問題：css中的單位都有哪些？可以取百分數的單位有哪些？其中margin-top取百分數時是相對于誰來計算的？ 回答： （1）css中的單位：CSS規...

    mylxsw 評論0 收藏0

發表評論

0條評論

jsummer

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<