文章詳情頁
沒明白盒子的height隨width的變化這段css是怎樣實現的?
瀏覽：146日期：2023-02-05 16:29:48
問題描述
剛看到這段css代碼,實現了一個1:1長寬比例并且隨網頁變化的盒子,沒有明白它設置height的原理是什么?
.item {
width: 20%;background-color: red;
}
.item:before {
content: '';display: block;padding-top: 100%;
}
問題解答
回答1：偽元素 item:before 是 item 的子元素，其內容插入在 item 之前。content: '' 使偽元素起作用，但內容高度為0。padding 的百分比根據父元素寬度而定。padding-top: 100% 就是 item 寬度的 100%，所以是 1:1 關系。
標簽：
CSS
相關文章：
1. Docker for Mac 創建的dnsmasq容器連不上/不工作的問題2. javascript - QWebEngineView 如何爬 angular 的動態數據？3. javascript - 使用angular 的ui-sref 中出現了中文參數，點擊跳轉后瀏覽器的地址欄里出現轉義后的%AE....%a%44. java - ConcurrentHashMap中的get()方法為什么可以不加鎖？5. java - 郵箱如何發送html內容6. html5 - 這個代碼顯示功能如何實現？7. javascript - 用JS 七牛上傳圖片出現文件已存在的錯誤（file exists）8. 工作近5年，3年Java Web ，近2年前端，未來何去何從？9. css3 - 圖片等比例縮放10. java - 字節流轉成字符串之后，在通過字符串轉成字節流后的文件為什么會不一樣？
排行榜
網公網安備