CSS3 寬高比例是一種非常方便的樣式屬性，它可以幫助我們更加靈活地控制元素的寬度和高度，使得頁(yè)面布局更加美觀和流暢。 在 CSS3 中，我們可以使用兩種方式來(lái)設(shè)置寬高比例。 第一種方式是使用 padding-bottom 屬性，例如：

.box {
width: 100%;
padding-bottom: 56.25%; /* 16:9 寬高比例 */
}

在上面的代碼中，我們?cè)O(shè)置了一個(gè)元素的寬度為 100%，然后使用 padding-bottom 屬性設(shè)置了它的高度，這里的 56.25% 就是指 16:9 的寬高比例。這個(gè)比例計(jì)算方式是 9 ÷ 16 × 100%，也就是說(shuō)元素高度是它寬度的 56.25%。 第二種方式是使用偽元素來(lái)實(shí)現(xiàn)。例如：

.box {
width: 100%;
position: relative;
}
.box:before {
content: '';
display: block;
padding-top: 56.25%; /* 16:9 寬高比例 */
}
.box >* {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

在上面的代碼中，我們?cè)O(shè)置了一個(gè)元素的寬度為 100%，然后使用偽元素 :before 來(lái)實(shí)現(xiàn)寬高比例。這里的 56.25% 也是指 16:9 的寬高比例，只不過(guò)這里是使用 padding-top 來(lái)實(shí)現(xiàn)的。同時(shí)，我們還需要在元素中加上一個(gè)絕對(duì)定位的子元素來(lái)實(shí)現(xiàn)內(nèi)容的顯示。 總的來(lái)說(shuō)，CSS3 寬高比例在響應(yīng)式布局和頁(yè)面排版中都有很大的用途。我們可以靈活地設(shè)置元素的寬高比例，讓頁(yè)面布局更加自然和流暢。