文章詳情頁
css - calc()設(shè)置寬度等于自身的高度?
瀏覽:260日期:2023-07-22 16:10:56
問題描述
代碼如下:
p{ height: 50vw; width: -moz-calc(height); width: -webkit-calc(height); width: calc(height); background:#c7c7c7;}
控制臺輸出結(jié)果

calc() 沒有這種用法嗎 如果沒有 該如何讓自身寬度等于自身高度呢?
問題解答
回答1:calc里面不能直接用height,要是高度和寬度相等有以下三種方法:
p{ width:20vw; /* viewport 的20% */ height:20vw; background-color:green; margin-bottom:20px;}
2.
p{ width:20%; padding-top:20%; /* padding相對于父容器的寬度作為對比 */ background-color:yellow; margin-bottom:20px;}
3.
p{ width: 20%; background-color:orange;}p:before{ content:’’; padding:50% 0;/* 此時(shí)padding相對于width:20%; */ display:inline-block;}
參考:演示
標(biāo)簽:
CSS
相關(guān)文章:
1. phpstudy8.1沒集成mysql-front2. 關(guān)docker hub上有些鏡像的tag被標(biāo)記““This image has vulnerabilities””3. node.js - mongodb查找子對象的名稱為某個(gè)值的對象的方法4. docker鏡像push報(bào)錯(cuò)5. Docker for Mac 創(chuàng)建的dnsmasq容器連不上/不工作的問題6. javascript - 在 model里定義的 引用表模型時(shí),model為undefined。7. 運(yùn)行python程序時(shí)出現(xiàn)“應(yīng)用程序發(fā)生異常”的內(nèi)存錯(cuò)誤?8. javascript - QQ第三方登錄的問題9. 利用IPMI遠(yuǎn)程安裝centos報(bào)錯(cuò)!10. html5 - datatables 加載不出來數(shù)據(jù)。
排行榜

熱門標(biāo)簽
網(wǎng)公網(wǎng)安備