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

資訊專欄INFORMATION COLUMN

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

wenzi / 858人閱讀

摘要：那想要優(yōu)化這一點(diǎn)，唯一的方法就是利用內(nèi)容高度來(lái)?yè)伍_(kāi)而非，這個(gè)方案跟消除浮動(dòng)所用的方案非常相似給容器添加一個(gè)子元素偽元素，并把子元素偽元素的設(shè)為，使其實(shí)際高度相當(dāng)于容器的寬度，如此一來(lái)，便能把容器的高度撐至與寬度一致了。

一個(gè)基礎(chǔ)卻又容易混淆的css知識(shí)點(diǎn)

本文依賴于一個(gè)基礎(chǔ)卻又容易混淆的css知識(shí)點(diǎn)：當(dāng)margin/padding取形式為百分比的值時(shí)，無(wú)論是left/right，還是top/bottom，都是以父元素的width為參照物的！
也許你會(huì)說(shuō)，left/right以父元素的width為參照物好理解，但是top/bottom為什么也是以父元素的width為參照物的呢？網(wǎng)上眾說(shuō)紛紜，關(guān)鍵還是看W3C的規(guī)范：

Note that in a horizontal flow, percentages on ‘margin-top’ and ‘margin-bottom’ are relative to the width of the containing block, not the height (and in vertical flow, ‘margin-left’ and ‘margin-right’ are relative to the height, not the width).
Note that percentages on ‘padding-top’ and ‘padding-bottom’ are relative to the width of the containing block, not the height (at least in a horizontal flow; in a vertical flow they are relative to the height).

權(quán)威一出，記住就好，科科。

高度自適應(yīng)占位

假設(shè)有這么個(gè)場(chǎng)景：

如上圖所示，有這么一種用來(lái)放圖片的容器，圖片都是正方形（為了方便舉例用正方形，實(shí)際上只要固定長(zhǎng)寬比例即可）。
在PC端好辦，容器的寬高都寫死是多少px，這樣即使圖片加載不出來(lái)容器都不會(huì)變型。但是在移動(dòng)端，由于各機(jī)型分辨率相差太大，寫死px是絕對(duì)不可能的，終究還得靠百分比來(lái)實(shí)現(xiàn)自適應(yīng)：

容器寬度設(shè)個(gè)50%吧，這樣一行放倆容器，各占屏幕寬度一半，沒(méi)問(wèn)題。

圖片寬度設(shè)個(gè)100%取容器的寬度，沒(méi)問(wèn)題。

容器高度沒(méi)法設(shè)置啊，因?yàn)槿萜鲗捀叩膮⒄瘴锊灰粯?，而且需求是高度與寬度一致，所以無(wú)法通過(guò)為容器高度設(shè)置百分比來(lái)達(dá)成，那就只能靠?jī)?nèi)容高度撐開(kāi)了。

容器的內(nèi)容高度就是圖片的高度，若圖片是正方形，則圖片高度與圖片寬度一致，也即與容器寬度一致，看起來(lái)沒(méi)問(wèn)題是吧？實(shí)際上，在瀏覽器把圖片加載出來(lái)以前，圖片的高度是零，那可就沒(méi)辦法把容器撐開(kāi)了，如下圖所示：

這樣一來(lái)，即使圖片加載速度很快，容器在圖片加載前后都會(huì)有一個(gè)變型的過(guò)程，也就是俗稱的“閃爍”，而如果圖片加載不出來(lái)，整體布局就更是難看了。
現(xiàn)在問(wèn)題已經(jīng)出來(lái)了，就是如何做到不靠圖片本身就能把容器的高度撐開(kāi)。

設(shè)置容器的padding-bottom/top

使用margin/padding的百分比值來(lái)解決自適應(yīng)高度的關(guān)鍵在于：容器margin/padding的百分比參照物是父元素的寬度，而容器的width的百分比參照物也是父元素的寬度，倆屬性參照物一致，那么想要把這倆屬性的值統(tǒng)一起來(lái)就很簡(jiǎn)單了。
優(yōu)化方案是這樣的：給容器設(shè)置padding-top/padding-bottom跟width一致的值（百分比）。

#container {
  width: 50%;  //父元素寬度的一半
  background-color: red;  //僅為了方便演示
}
.placeholder {
  padding-top: 50%; //與width: 50%;的值保持一致，也就是相當(dāng)于父元素寬度的一半。
}

結(jié)果，容器的視覺(jué)效果如下：

容器的盒子模型如下：

從盒子模型可以看出，雖然容器的內(nèi)容高度為0，但由于有了跟內(nèi)容寬度一致的padding，因此整體視覺(jué)效果上像是被撐開(kāi)了。此方案瀏覽器兼容性很不錯(cuò)，唯一的缺陷是無(wú)法給容器設(shè)置max-height屬性了，因?yàn)?b>max-height只能限制內(nèi)容高度，而不能限制padding（我原以為設(shè)置box-sizing: border-box;可以讓max-height限制padding，不過(guò)親測(cè)無(wú)效，明白的朋友麻煩告知一下原因）。

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

從上面的方案看出max-height失效的原因是容器的高度本來(lái)就是padding撐的，而內(nèi)容高度為0，max-height無(wú)法起作用。那想要優(yōu)化這一點(diǎn)，唯一的方法就是利用內(nèi)容高度來(lái)?yè)伍_(kāi)而非padding，這個(gè)方案跟消除浮動(dòng)所用的方案非常相似：給容器添加一個(gè)子元素/偽元素，并把子元素/偽元素的margin/padding設(shè)為100%，使其實(shí)際高度相當(dāng)于容器的寬度，如此一來(lái)，便能把容器的高度撐至與寬度一致了。由于添加子元素與HTML語(yǔ)義化相悖，因此更推薦使用偽元素(:after)來(lái)實(shí)現(xiàn)此方案。

#container {
  width: 50%;
  position: relative;
  background-color: red;
  overflow: hidden;  //需要觸發(fā)BFC消除margin折疊的問(wèn)題
}
.placeholder:after {
  content: "";
  display: block;
  margin-top: 100%; //margin 百分比相對(duì)父元素寬度計(jì)算
}

此時(shí)視覺(jué)效果上與上一方案無(wú)異，重點(diǎn)來(lái)看看此時(shí)容器的盒子模型：

可以看出，此時(shí)容器的內(nèi)容高度與內(nèi)容寬度一致，媽媽再也不用擔(dān)心我無(wú)法通過(guò)max-height來(lái)限制容器高度了。
另外，使用margin的話需要考慮margin折疊的問(wèn)題（參考），padding則無(wú)此煩惱。

容器內(nèi)部如何添加內(nèi)容

上述方案只提及如何不依賴容器內(nèi)容來(lái)?yè)伍_(kāi)容器，那么，在撐開(kāi)容器后，如何給容器添加內(nèi)容（圖片、文本等）呢？
答案很簡(jiǎn)單，那就是利用position: absolute;：

#container {
  width: 50%;
  position: relative;
  background-color: red;
  overflow: hidden;  //需要觸發(fā)BFC消除margin折疊的問(wèn)題
}
.placeholder:after {
  content: "";
  display: block;
  margin-top: 100%; //margin 百分比相對(duì)父元素寬度計(jì)算
} 
img {
  position: absolute;
  top: 0;
  width: 100%;
}

效果如下：

后補(bǔ) 寬高不一致的自適應(yīng)怎么做？

有朋友可能會(huì)問(wèn)，上面提到的都是寬度與高度一致的情況，如果不一致那怎么辦呢？其實(shí)自適應(yīng)的重點(diǎn)在于，元素的寬高必須維持一個(gè)固定的比例，比如說(shuō)寬高一致比例就是1:1，寬是高的兩倍那就是2:1，只要這個(gè)比例是明確而且固定的，那么只需要相應(yīng)地修改margin/padding的百分比值即可適應(yīng)不同的寬高比例。

還有其它的寬高自適應(yīng)方案嗎？

當(dāng)然有，比如說(shuō)css3新推出的長(zhǎng)度單位vw，就是以屏幕寬度為參照物的，只要給元素的width和height都用上vw單位，那width跟height就可以輕易設(shè)成一樣的了，不過(guò)既然是css3，瀏覽器兼容性肯定成問(wèn)題：

總結(jié)

自適應(yīng)的精髓在于寬度，margin/padding設(shè)置百分比彌補(bǔ)了元素高度無(wú)法自適應(yīng)地與元素寬度保持一致的缺陷。

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

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

相關(guān)文章

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

    摘要：還有一種說(shuō)法是根本原因并不是因?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百分比值的計(jì)算

    摘要：還有一種說(shuō)法是根本原因并不是因?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)...

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

  • Week 1：那些值得一閱的好文章

    摘要：產(chǎn)品熱門內(nèi)容優(yōu)化系列文章第一篇從和開(kāi)始及系列文章牧曦之晨譯專家系列理解垃圾回收牧曦之晨譯專家系列垃圾回收的監(jiān)控的坐標(biāo)空間及位置巧用的百分比值實(shí)現(xiàn)高度自適應(yīng)多用于占位，避免閃爍和沒(méi)有一點(diǎn)關(guān)系顏海鏡不可錯(cuò)過(guò)的迷你庫(kù)簡(jiǎn)單的異步文件加載器工具名一實(shí) SF 產(chǎn)品 news Noodles 《SegmentFault 熱門內(nèi)容優(yōu)化》 系列文章 neu 《Gradle for Android 第一...

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

  • Week 1：那些值得一閱的好文章

    摘要：產(chǎn)品熱門內(nèi)容優(yōu)化系列文章第一篇從和開(kāi)始及系列文章牧曦之晨譯專家系列理解垃圾回收牧曦之晨譯專家系列垃圾回收的監(jiān)控的坐標(biāo)空間及位置巧用的百分比值實(shí)現(xiàn)高度自適應(yīng)多用于占位，避免閃爍和沒(méi)有一點(diǎn)關(guān)系顏海鏡不可錯(cuò)過(guò)的迷你庫(kù)簡(jiǎn)單的異步文件加載器工具名一實(shí) SF 產(chǎn)品 news Noodles 《SegmentFault 熱門內(nèi)容優(yōu)化》 系列文章 neu 《Gradle for Android 第一...

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

  • Week 1：那些值得一閱的好文章

    摘要：產(chǎn)品熱門內(nèi)容優(yōu)化系列文章第一篇從和開(kāi)始及系列文章牧曦之晨譯專家系列理解垃圾回收牧曦之晨譯專家系列垃圾回收的監(jiān)控的坐標(biāo)空間及位置巧用的百分比值實(shí)現(xiàn)高度自適應(yīng)多用于占位，避免閃爍和沒(méi)有一點(diǎn)關(guān)系顏海鏡不可錯(cuò)過(guò)的迷你庫(kù)簡(jiǎn)單的異步文件加載器工具名一實(shí) SF 產(chǎn)品 news Noodles 《SegmentFault 熱門內(nèi)容優(yōu)化》 系列文章 neu 《Gradle for Android 第一...

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

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

0條評(píng)論

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