CSS中的高是寬的倍數是一種非常常見的技巧，它可以用來幫助我們創建一些更加協調和美觀的頁面布局。簡單來說，它就是指一個元素的高度是其寬度的多少倍。

為什么要使用高是寬的倍數呢？一方面，這種技巧可以幫助我們保持頁面元素的比例，使布局更加協調。另一方面，它還可以幫助我們實現響應式設計。當頁面縮小或放大時，這些元素可以按比例縮放，從而保持整個頁面的比例和平衡。

.example {
width: 200px;
height: 100%;
padding-bottom: 50%;
}

上面的代碼演示了如何使用高是寬的倍數來創建一個正方形元素。這個元素的寬度是200px，但是它的高度卻使用了padding-bottom屬性來設置。具體而言，padding-bottom的值是50%，這意味著元素的高度是其寬度的50%。

另外，我們還可以通過給元素的父級元素設置position: relative屬性來控制元素的位置。下面的代碼示例演示了如何將一個高是寬的圖片元素放置在頁面的中心：

.parent {
position: relative;
}
.child {
width: 50%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

在這個代碼中，我們首先給父級元素設置了position: relative屬性，以便子元素可以基于它進行定位。然后，我們通過將子元素的寬度設置為50%并將其高度設置為100%來實現高是寬的效果。最后，我們使用position: absolute屬性將子元素絕對定位到父級元素的中心，并使用transform: translate(-50%, -50%)將其移動到中心位置。

總的來說，高是寬的倍數是一種非常實用的技巧，它可以幫助我們快速設計出優美的布局和響應式設計。如果你還沒有嘗試過這種技巧，不妨在實際項目中嘗試一下，相信你一定會得到意想不到的效果。