文章詳情頁
css3 - 沒明白盒子的height隨width的變化這段css是怎樣實現(xiàn)的?
瀏覽：281日期：2023-07-02 14:33:31
問題描述
剛看到這段css代碼,實現(xiàn)了一個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)系。
回答2：padding-top: percent 是根據(jù)包含塊寬度的比例來計算的
標(biāo)簽：
CSS
相關(guān)文章：
1. golang - 用IDE看docker源碼時的小問題2. html - css氣泡，實現(xiàn)“倒三角（不知道算不算三角了）”可透明的。3. 我何時應(yīng)該在Java中使用JFrame.add（component）和JFrame.getContentPane（）。add（component）4. phpstudy8.1沒集成mysql-front5. 利用IPMI遠(yuǎn)程安裝centos報錯！6. 運行python程序時出現(xiàn)“應(yīng)用程序發(fā)生異常”的內(nèi)存錯誤？7. docker - 如何修改運行中容器的配置8. html5和Flash對抗是什么情況？9. javascript - 請指條明路，angular的$event，在select中卻是undefined？10. 前端 - @media query 使用出現(xiàn)的問題？
排行榜
熱門標(biāo)簽
網(wǎng)公網(wǎng)安備