文章詳情頁(yè)
沒(méi)明白盒子的height隨width的變化這段css是怎樣實(shí)現(xiàn)的?
瀏覽：232日期：2023-02-05 16:29:48
問(wèn)題描述
剛看到這段css代碼,實(shí)現(xiàn)了一個(gè)1:1長(zhǎng)寬比例并且隨網(wǎng)頁(yè)變化的盒子,沒(méi)有明白它設(shè)置height的原理是什么?
.item {
width: 20%;background-color: red;
}
.item:before {
content: '';display: block;padding-top: 100%;
}
問(wèn)題解答
回答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. macos - 無(wú)法source activate python272. javascript - 微信網(wǎng)頁(yè)開(kāi)發(fā)從菜單進(jìn)入頁(yè)面后，按返回鍵沒(méi)有關(guān)閉瀏覽器而是刷新當(dāng)前頁(yè)面，求解決？3. 預(yù)訂金和尾款分別支付4. javascript - h5微信中怎么禁止橫屏5. empty比isset更嚴(yán)格一點(diǎn)6. 運(yùn)行python程序時(shí)出現(xiàn)“應(yīng)用程序發(fā)生異常”的內(nèi)存錯(cuò)誤？7. 我在導(dǎo)入模板資源時(shí)遇到無(wú)法顯示的問(wèn)題，請(qǐng)老師解答下8. PHPExcel表格導(dǎo)入數(shù)據(jù)庫(kù)怎么導(dǎo)入9. thinkphp6使用驗(yàn)證器 信息如何輸出到前端頁(yè)面10. python - sqlalchemy更新數(shù)據(jù)報(bào)錯(cuò)
排行榜
熱門(mén)標(biāo)簽
網(wǎng)公網(wǎng)安備