文章詳情頁
沒明白盒子的height隨width的變化這段css是怎樣實(shí)現(xiàn)的?
瀏覽：133日期：2023-02-05 16:29:48
問題描述
剛看到這段css代碼,實(shí)現(xiàn)了一個(gè)1:1長寬比例并且隨網(wǎng)頁變化的盒子,沒有明白它設(shè)置height的原理是什么?
.item {
width: 20%;background-color: red;
}
.item:before {
content: '';display: block;padding-top: 100%;
}
問題解答
回答1：偽元素 item:before 是 item 的子元素，其內(nèi)容插入在 item 之前。content: '' 使偽元素起作用，但內(nèi)容高度為0。padding 的百分比根據(jù)父元素寬度而定。padding-top: 100% 就是 item 寬度的 100%，所以是 1:1 關(guān)系。
標(biāo)簽：
CSS
相關(guān)文章：
1. python - oslo_config2. python - 如何統(tǒng)計(jì)一份英文 API 開發(fā)文檔（如 javadoc文檔）的詞頻？3. mysql優(yōu)化 - mysql 一張表如果不能確保字段列長度一致，是不是就不需要用到char。4. python - 請問這兩個(gè)地方是為什么呢？5. python - 為什么match匹配出來的結(jié)果是<_sre.SRE_Match object; span=(0, 54), match=’’>6. 請教一個(gè)mysql去重取最新記錄7. javascript - 按鈕鏈接到另一個(gè)網(wǎng)址 怎么通過百度統(tǒng)計(jì)計(jì)算按鈕的點(diǎn)擊數(shù)量8. 人工智能 - python 機(jī)器學(xué)習(xí) 醫(yī)療數(shù)據(jù) 怎么學(xué)9. 大家都用什么工具管理mysql數(shù)據(jù)庫？10. php - 有關(guān)sql語句反向LIKE的處理
排行榜
熱門標(biāo)簽
網(wǎng)公網(wǎng)安備