CSS是現在網頁設計界最為基礎，也是最為重要的一門技術。其中一個很有意思的特性就是根據寬度計算高度。這個方便了我們在設計頁面的時候，不需要用JavaScript來控制元素的高度和寬度，而是通過CSS自動計算。

div {
width: 50%;
padding-bottom: 50%;
background: red;
position: relative;
}
div p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

上面的代碼中，我們在一個div元素上設置了寬度為50%、padding-bottom為50%。這里為什么要加一個padding-bottom呢？因為元素的高度是由其內部內容的高度決定的，而我們想要設置一個正方形的形狀，所以需要通過padding-bottom來撐開元素高度。

接下來我們在這個div里加入了一個p元素，將其在元素內置于中央。這一步是因為我們剛剛撐開了元素，如果不將內容放置于中央，內容就會跑到底部去。

通過這個技巧，我們可以輕松的設置出一個正方形或矩形等形狀的元素，而不需要通過JavaScript來進行控制，從而減少瀏覽器的負擔，提高網頁設計的效率。