文章詳情頁
沒明白盒子的height隨width的變化這段css是怎樣實現(xiàn)的?
瀏覽：129日期：2023-02-05 16:29:48
問題描述
剛看到這段css代碼,實現(xiàn)了一個1:1長寬比例并且隨網(wǎng)頁變化的盒子,沒有明白它設置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 關系。
標簽：
CSS
相關文章：
1. javascript - JS設置Video視頻對象的currentTime時出現(xiàn)了問題,IE,Edge,火狐,都可以設置,反而chrom卻...2. java固定鍵值轉(zhuǎn)換，使用枚舉實現(xiàn)字典？3. 如何為每個應用程序配置tomcat 6的logs / catalina.out。（為sys.out，sys.err配置Web應用程序特定的日志文件）4. css - ionic中的柵格布局如何讓文字內(nèi)容多少不同的每一列中的內(nèi)容都能垂直居中？5. php自學從哪里開始？6. phpstady在win10上運行7. java - 我設置了cookie的max age，但是cookie依然在關閉游覽器后消失了8. vim - win10無法打開markdown編輯器9. 這是什么情況？？？10. javascript - 用jsonp抓取qq音樂總是說回調(diào)函數(shù)沒有定義
排行榜
熱門標簽
網(wǎng)公網(wǎng)安備