成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

margin/padding百分比值的計(jì)算

Pikachu / 2852人閱讀

摘要：還有一種說法是根本原因并不是因?yàn)樗姥h(huán)。，總而言之就是在默認(rèn)的水平文檔流方向下，和屬性的垂直方向的百分比值都是相對(duì)于父元素寬度計(jì)算的。表示元素的高度為寬度的一半。

1、百分比介紹

一般元素的寬度用百分比值表示時(shí)，元素的總寬度包括外邊距取決于父元素的width，這樣可能得到“流式”頁(yè)面，即元素的外邊距會(huì)擴(kuò)大或縮小以適應(yīng)父元素的實(shí)際大小。如果對(duì)這個(gè)文檔設(shè)置該樣式，使其子元素使用百分?jǐn)?shù)外邊距，當(dāng)用戶修改瀏覽窗口的寬度時(shí)，外邊距會(huì)隨之?dāng)U大或縮小。

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

2、為什么呢？

CSS權(quán)威指南中的解釋：若是相對(duì)于父元素的高度計(jì)算會(huì)形成死循環(huán)。
“我們認(rèn)為，正常流中的大多數(shù)元素都會(huì)足夠高以包含其后代元素（包括外邊距），如果一個(gè)元素的上下外邊距是父元素的height的百分?jǐn)?shù)，就可能導(dǎo)致一個(gè)無限循環(huán)，父元素的height會(huì)增加，以適應(yīng)后代元素上下外邊距的增加，而相應(yīng)的，上下外邊距因?yàn)楦冈豩eight的增加也會(huì)增加，形成無限循環(huán)?！?/em>

還有一種說法是根本原因并不是因?yàn)樗姥h(huán)。例如zhangxinxu認(rèn)為相對(duì)于 height 計(jì)算，大多數(shù)情況下計(jì)算值都是 0，跟擺設(shè)沒什么 區(qū)別，還不如相對(duì)寬度計(jì)算，因?yàn)?CSS 默認(rèn)的是水平流，計(jì)算值一直會(huì)有效，而且我們還可以 利用這一特性實(shí)現(xiàn)一些有意思的布局效果。也就是面向場(chǎng)景和需求設(shè)計(jì)，這種設(shè)計(jì)可以讓我們輕松實(shí)現(xiàn)自適應(yīng)的等比例矩形效果。

Anyway，總而言之就是：

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

  
1




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

div中沒有內(nèi)容時(shí)，實(shí)現(xiàn)的是一個(gè)寬高為1:2的小矩形。padding-top: 50%;表示元素的高度為寬度的一半。padding-top: 100%; 可實(shí)現(xiàn)寬高為1:1的小矩形。（改為padding: 50%`，實(shí)現(xiàn)的是一個(gè)寬高1:1的小矩形，因?yàn)?0%+50%=100%；）

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

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

4、應(yīng)用

對(duì)于絕大多數(shù)都布局，我們并不要求非要比例固定，但是有一種情況例外，那就是圖片，因?yàn)閳D片原始尺寸它是固定的。在傳統(tǒng)的固定寬度的布局下，我們會(huì)通過給圖片設(shè)定具體的寬度和高度值，來保證我們的圖片占據(jù)區(qū)域穩(wěn)固；但是在移動(dòng)端或者在響應(yīng)式開發(fā)情況下，圖片最終展現(xiàn)的寬度很可能是不確定的。

此時(shí)需要的不是對(duì)圖片進(jìn)行固定尺寸設(shè)定，而是比例設(shè)定。為了維持圖片的寬高比固定，即保持原來的尺寸比不變，要做到元素高度隨著元素的進(jìn)行自適應(yīng)變化。

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

所以對(duì)圖片高寬都進(jìn)行限定還是有必要的，但是同時(shí)要保證寬度自適應(yīng)。

給子元素/偽元素設(shè)置margin/padding撐開容器

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


  




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

那么，在撐開容器后，如何給容器添加內(nèi)容（圖片、文本等）呢？
利用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實(shí)現(xiàn)比例固定圖片自適應(yīng)布局
巧用margin/padding的百分比值實(shí)現(xiàn)高度自適應(yīng)（多用于占位，避免閃爍）

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/52968.html

相關(guān)文章

  • margin/padding百分比值的計(jì)算

    摘要：還有一種說法是根本原因并不是因?yàn)樗姥h(huán)。，總而言之就是在默認(rèn)的水平文檔流方向下，和屬性的垂直方向的百分比值都是相對(duì)于父元素寬度計(jì)算的。表示元素的高度為寬度的一半。 1、百分比介紹 一般元素的寬度用百分比值表示時(shí)，元素的總寬度包括外邊距取決于父元素的width，這樣可能得到流式頁(yè)面，即元素的外邊距會(huì)擴(kuò)大或縮小以適應(yīng)父元素的實(shí)際大小。如果對(duì)這個(gè)文檔設(shè)置該樣式，使其子元素使用百分?jǐn)?shù)外邊距，當(dāng)...

    jsummer 評(píng)論0 收藏0

  • 巧用margin/padding的百分比值實(shí)現(xiàn)高度自適應(yīng)（多用于占位，避免閃爍）

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

    wenzi 評(píng)論0 收藏0

  • 詳述css中的百分比值

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

    flyer_dev 評(píng)論0 收藏0

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

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

    impig33 評(píng)論0 收藏0

  • CSS屬性中經(jīng)常出現(xiàn)的百分比

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

    mylxsw 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<