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