資訊專欄INFORMATION COLUMN
摘要：一個項目中需要用到一個廣告位的輪播圖效果，而這個輪播圖位置需要根據(jù)不同設(shè)備的尺寸進(jìn)行縮放從而保持相同的比例。但是其中值得思考的東西頗多，不妨讀者也想一想為什么父元素的屬性要設(shè)置為子元素為什么不設(shè)置屬性注意屬性的繼承關(guān)系
一個項目中需要用到一個廣告位的輪播圖效果，而這個輪播圖位置需要根據(jù)不同設(shè)備的尺寸進(jìn)行縮放從而保持相同的比例。
最開始使勁琢磨發(fā)現(xiàn)用 width + height 屬性是實現(xiàn)不了這種效果的，非得用 JS 才能達(dá)到這種效果嗎？終于發(fā)現(xiàn)有前人早已解決過這個問題，這里權(quán)當(dāng)自己吸收學(xué)習(xí)，因此記錄下來。
HTML
CSS
.box
{
width: 100%;
height: 0;
padding-bottom: 50%;
}
img
{
width: 100%;
}
演示效果
仔細(xì)想一想這不過是 CSS 中最基礎(chǔ)的內(nèi)容，沒有什么新穎華麗的內(nèi)容。但是其中值得思考的東西頗多，不妨讀者也想一想：
為什么父元素 .box 的 height 屬性要設(shè)置為 0
子元素 img 為什么不設(shè)置 height 屬性
注意
padding 屬性的繼承關(guān)系
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/115895.html
摘要：挺早就接觸了的布局，深入使用也就是在近期移動端開發(fā)。屬性用于設(shè)置或檢索彈性盒模型對象的子元素如何分配空間。所以，項目之間的間隔比項目與邊框的間隔大一倍。默認(rèn)值是，也就是不進(jìn)行縮放，占原來元素內(nèi)容寬度大小。 挺早就接觸了css的flex布局，深入使用也就是在近期移動端開發(fā)。老來多健忘，只能自己梳理一下知識點，當(dāng)做溫故知新吧。 ，請原諒小白的才疏學(xué)淺，寫的不到位的地方請指正。 flex屬性...
摘要：同時也無需使用來實現(xiàn)高度自適應(yīng)。通常默認(rèn)情況下不用再設(shè)置高度值為，對象高度即是自適應(yīng)高度。高度不能設(shè)置百分比高度如設(shè)置百分比的高度無效。擴(kuò)展閱讀寬度最小高度最大高度轉(zhuǎn)載來源網(wǎng)址DIV+CSS height高度知識教程篇 DIV CSS高度簡介這里的CSS高度是指通過CSS來控制設(shè)置對象的高度。使用CSS屬性單詞height。單位可以使用PX，em等常用使用PX（像素）為html單位。 he...
摘要：下面介紹有關(guān)的一些常用基本屬性是定義主軸的方向，常用的有，。就直接講一個稍微難一點的例子如果需要實現(xiàn)上面的情況，那么代碼如下更多的就需要自己去探索，這里就不一一講解了。 快應(yīng)用之flex布局 在我們常用的布局中有display + position + float進(jìn)行布局，但是這些布局或多或少都有些麻煩（雖然我最喜歡用position,哈哈啥都能干)。但是由于快應(yīng)用只能夠使用flex布...
閱讀 1524·2021-11-25 09:43
閱讀 4066·2021-11-15 11:37
閱讀 3199·2021-08-17 10:13
閱讀 3507·2019-08-30 14:16
閱讀 3538·2019-08-26 18:37
閱讀 2495·2019-08-26 11:56
閱讀 1134·2019-08-26 10:42
閱讀 613·2019-08-26 10:39
