文章詳情頁
css3 - 沒明白盒子的height隨width的變化這段css是怎樣實現(xiàn)的?
瀏覽：181日期：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. 如何解決docker宿主機無法訪問容器中的服務(wù)？2. 頁面用CSS3的scale屬性進行了縮放，圖片模糊解決不了，那么字體能否讓它們不模糊呢？3. 請問關(guān)于 Java static 變量的問題?4. 跨類調(diào)用后，找不到方法5. javascript - 微信IOS頁面中input type=number輸入數(shù)字無法顯示，安卓顯示正常6. 淺談vue生命周期共有幾個階段？分別是什么？7. node.js - vue-cli webpack express配置服務(wù)端路由規(guī)則8. $( "html" ).parent()方法返回一個包含document的集合，而$( "html" ).parents()返回一個空集合 哪位大神來解釋下？9. ios - Crash Log 里關(guān)于微信SDK的問題10. javascript - hash為什么可以做路由跳轉(zhuǎn)，不會刷新頁面
排行榜
熱門標(biāo)簽
網(wǎng)公網(wǎng)安備