CSS佈局——實現一個自適應瀏覽器視窗寬度的正方形
阿新 • • 發佈：2019-01-31
題意大意：建立一個正方形，其邊長定位相對瀏覽器視窗的寬度變化而變化。
實現思路：本次實現主要應用padding-bottom（或padding-left）屬性值等於width（或height）來實現等邊長的矩形（即正方形）。
大致效果：
一種實現：設定width相對百分比，padding-bottom取值等於height。
程式碼如下：
另一種實現：設定height相對百分比，padding-left取值等於height。<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>自適應瀏覽器視窗寬度的正方形</title> <style> body{ margin:0; padding:0; background:#FFFBCD; } .square{ width:30%; padding-bottom:30%; margin-top:10%; margin-left:10%; background:#0000FF; } </style> </head> <body> <div class="square"></div> </body> </html>
程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>自適應瀏覽器視窗寬度的正方形</title> <style> body{ margin:0; padding:0; background:#FFFBCD; } .square{ height:30%; padding-left:30%; margin-top:10%; margin-left:10%; background:#0000FF; } </style> </head> <body> <div class="square"></div> </body> </html>