摘要:那想要優化這一點,唯一的方法就是利用內容高度來撐開而非,這個方案跟消除浮動所用的方案非常相似給容器添加一個子元素偽元素,并把子元素偽元素的設為,使其實際高度相當于容器的寬度,如此一來,便能把容器的高度撐至與寬度一致了。
一個基礎卻又容易混淆的css知識點
本文依賴于一個基礎卻又容易混淆的css知識點:當margin/padding取形式為百分比的值時,無論是left/right,還是top/bottom,都是以父元素的width為參照物的!
也許你會說,left/right以父元素的width為參照物好理解,但是top/bottom為什么也是以父元素的width為參照物的呢?網上眾說紛紜,關鍵還是看W3C的規范:
</>復制代碼
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).
權威一出,記住就好,科科。
高度自適應占位假設有這么個場景:
如上圖所示,有這么一種用來放圖片的容器,圖片都是正方形(為了方便舉例用正方形,實際上只要固定長寬比例即可)。
在PC端好辦,容器的寬高都寫死是多少px,這樣即使圖片加載不出來容器都不會變型。但是在移動端,由于各機型分辨率相差太大,寫死px是絕對不可能的,終究還得靠百分比來實現自適應:
容器寬度設個50%吧,這樣一行放倆容器,各占屏幕寬度一半,沒問題。
圖片寬度設個100%取容器的寬度,沒問題。
容器高度沒法設置啊,因為容器寬高的參照物不一樣,而且需求是高度與寬度一致,所以無法通過為容器高度設置百分比來達成,那就只能靠內容高度撐開了。
容器的內容高度就是圖片的高度,若圖片是正方形,則圖片高度與圖片寬度一致,也即與容器寬度一致,看起來沒問題是吧?實際上,在瀏覽器把圖片加載出來以前,圖片的高度是零,那可就沒辦法把容器撐開了,如下圖所示:
這樣一來,即使圖片加載速度很快,容器在圖片加載前后都會有一個變型的過程,也就是俗稱的“閃爍”,而如果圖片加載不出來,整體布局就更是難看了。
現在問題已經出來了,就是如何做到不靠圖片本身就能把容器的高度撐開。
使用margin/padding的百分比值來解決自適應高度的關鍵在于:容器margin/padding的百分比參照物是父元素的寬度,而容器的width的百分比參照物也是父元素的寬度,倆屬性參照物一致,那么想要把這倆屬性的值統一起來就很簡單了。
優化方案是這樣的:給容器設置padding-top/padding-bottom跟width一致的值(百分比)。
</>復制代碼
#container {
width: 50%; //父元素寬度的一半
background-color: red; //僅為了方便演示
}
.placeholder {
padding-top: 50%; //與width: 50%;的值保持一致,也就是相當于父元素寬度的一半。
}
</>復制代碼
結果,容器的視覺效果如下:
容器的盒子模型如下:
從盒子模型可以看出,雖然容器的內容高度為0,但由于有了跟內容寬度一致的padding,因此整體視覺效果上像是被撐開了。此方案瀏覽器兼容性很不錯,唯一的缺陷是無法給容器設置max-height屬性了,因為max-height只能限制內容高度,而不能限制padding(我原以為設置box-sizing: border-box;可以讓max-height限制padding,不過親測無效,明白的朋友麻煩告知一下原因)。
給子元素/偽元素設置margin/padding撐開容器從上面的方案看出max-height失效的原因是容器的高度本來就是padding撐的,而內容高度為0,max-height無法起作用。那想要優化這一點,唯一的方法就是利用內容高度來撐開而非padding,這個方案跟消除浮動所用的方案非常相似:給容器添加一個子元素/偽元素,并把子元素/偽元素的margin/padding設為100%,使其實際高度相當于容器的寬度,如此一來,便能把容器的高度撐至與寬度一致了。由于添加子元素與HTML語義化相悖,因此更推薦使用偽元素(:after)來實現此方案。
</>復制代碼
#container {
width: 50%;
position: relative;
background-color: red;
overflow: hidden; //需要觸發BFC消除margin折疊的問題
}
.placeholder:after {
content: "";
display: block;
margin-top: 100%; //margin 百分比相對父元素寬度計算
}
</>復制代碼
此時視覺效果上與上一方案無異,重點來看看此時容器的盒子模型:
可以看出,此時容器的內容高度與內容寬度一致,媽媽再也不用擔心我無法通過max-height來限制容器高度了。
另外,使用margin的話需要考慮margin折疊的問題(參考),padding則無此煩惱。
上述方案只提及如何不依賴容器內容來撐開容器,那么,在撐開容器后,如何給容器添加內容(圖片、文本等)呢?
答案很簡單,那就是利用position: absolute;:
</>復制代碼
#container {
width: 50%;
position: relative;
background-color: red;
overflow: hidden; //需要觸發BFC消除margin折疊的問題
}
.placeholder:after {
content: "";
display: block;
margin-top: 100%; //margin 百分比相對父元素寬度計算
}
img {
position: absolute;
top: 0;
width: 100%;
}
</>復制代碼
效果如下:
后補 寬高不一致的自適應怎么做?有朋友可能會問,上面提到的都是寬度與高度一致的情況,如果不一致那怎么辦呢?其實自適應的重點在于,元素的寬高必須維持一個固定的比例,比如說寬高一致比例就是1:1,寬是高的兩倍那就是2:1,只要這個比例是明確而且固定的,那么只需要相應地修改margin/padding的百分比值即可適應不同的寬高比例。
還有其它的寬高自適應方案嗎?當然有,比如說css3新推出的長度單位vw,就是以屏幕寬度為參照物的,只要給元素的width和height都用上vw單位,那width跟height就可以輕易設成一樣的了,不過既然是css3,瀏覽器兼容性肯定成問題:
總結自適應的精髓在于寬度,margin/padding設置百分比彌補了元素高度無法自適應地與元素寬度保持一致的缺陷。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/111248.html
摘要:還有一種說法是根本原因并不是因為死循環。,總而言之就是在默認的水平文檔流方向下,和屬性的垂直方向的百分比值都是相對于父元素寬度計算的。表示元素的高度為寬度的一半。 1、百分比介紹 一般元素的寬度用百分比值表示時,元素的總寬度包括外邊距取決于父元素的width,這樣可能得到流式頁面,即元素的外邊距會擴大或縮小以適應父元素的實際大小。如果對這個文檔設置該樣式,使其子元素使用百分數外邊距,當...
摘要:還有一種說法是根本原因并不是因為死循環。,總而言之就是在默認的水平文檔流方向下,和屬性的垂直方向的百分比值都是相對于父元素寬度計算的。表示元素的高度為寬度的一半。 1、百分比介紹 一般元素的寬度用百分比值表示時,元素的總寬度包括外邊距取決于父元素的width,這樣可能得到流式頁面,即元素的外邊距會擴大或縮小以適應父元素的實際大小。如果對這個文檔設置該樣式,使其子元素使用百分數外邊距,當...
摘要:產品熱門內容優化系列文章第一篇從和開始及系列文章牧曦之晨譯專家系列理解垃圾回收牧曦之晨譯專家系列垃圾回收的監控的坐標空間及位置巧用的百分比值實現高度自適應多用于占位,避免閃爍和沒有一點關系顏海鏡不可錯過的迷你庫簡單的異步文件加載器工具名一實 SF 產品 news Noodles 《SegmentFault 熱門內容優化》 系列文章 neu 《Gradle for Android 第一...
摘要:產品熱門內容優化系列文章第一篇從和開始及系列文章牧曦之晨譯專家系列理解垃圾回收牧曦之晨譯專家系列垃圾回收的監控的坐標空間及位置巧用的百分比值實現高度自適應多用于占位,避免閃爍和沒有一點關系顏海鏡不可錯過的迷你庫簡單的異步文件加載器工具名一實 SF 產品 news Noodles 《SegmentFault 熱門內容優化》 系列文章 neu 《Gradle for Android 第一...
摘要:產品熱門內容優化系列文章第一篇從和開始及系列文章牧曦之晨譯專家系列理解垃圾回收牧曦之晨譯專家系列垃圾回收的監控的坐標空間及位置巧用的百分比值實現高度自適應多用于占位,避免閃爍和沒有一點關系顏海鏡不可錯過的迷你庫簡單的異步文件加載器工具名一實 SF 產品 news Noodles 《SegmentFault 熱門內容優化》 系列文章 neu 《Gradle for Android 第一...
閱讀 2003·2021-11-23 10:08
閱讀 2337·2021-11-22 15:25
閱讀 3276·2021-11-11 16:55
閱讀 772·2021-11-04 16:05
閱讀 2606·2021-09-10 10:51
閱讀 713·2019-08-29 15:38
閱讀 1585·2019-08-29 14:11
閱讀 3487·2019-08-29 12:42