本篇文章帶給大家的內容是關於CSS怎麼實現自適應方塊?有程式碼嗎,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS实现自适应正方形</title> <style> /*使用padding-bottom实现正方形*/ #test7{ width: 400px; background: gray; } .placeholder { width: 30%; padding-bottom: 30%;/* padding百分比相对父元素宽度计算,用padding去填充height*/ height: 0;/*避免被内容撑开多余的高度 */ background: #4acfff; } .vw { width: 10%; height: 10vw; background: pink; } </style> </head> <body> <!-- 使用padding-bottom实现正方形 --> <!-- padding百分比相对父元素宽度计算,用padding去填充height --> <p id="test7"> <p class="placeholder">使用padding-bottom实现正方形</p> </p> <!-- 使用css3单位vw --> <!-- 原理同padding,也是利用了vw是相对宽度,不过要注意是相对视窗宽度哦 --> <p class="vw"></p> </body> </html>
以上就是對的全部介紹,如果您想了解更多有關CSS視頻教程,請關注PHP中文網。
以上是CSS要怎麼實現自適應方塊?有代碼嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章!