CSS是我們日常開發中極其重要的技術，它可以為網頁添加各種樣式，其中包括設置高寬比。在本文中，我們將學習如何使用CSS來設置高寬比。

.box {
width: 500px;
height: 300px;
background-color: #eee;
position: relative;
overflow: hidden;
}
.box:before {
content: '';
display: block;
padding-top: 56.25%;
}
.box iframe {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}

在上面的代碼中，我們定義了一個名為“box”的類，它是一個具有固定寬和高的容器。為了保證該容器內的內容呈現正確的高寬比，我們使用了一個偽元素“:before”，將其高度設為0，寬高比設為16:9。
因為將內容加入到該容器中，我們需要在其中添加一個iframe，使用絕對定位使其填充整個容器。這樣，我們就可以在該容器內嵌入一個高度為500px，寬高比為16:9的嵌入式視頻或地圖。

在實踐中，我們可以使用這些屬性來輕松地設置高寬比。簡單來說，我們可以使用一個具有高度為0和“padding-top”屬性為百分比的元素，使其寬度等于其父容器的寬度。然后可以使用相對或絕對定位來放置實際的內容，并指定其寬度和高度為100%。

通過這樣的方式，我們可以輕松地在頁面上添加任何區域，并為其設置正確的高寬比。