本文目錄導(dǎo)讀：

1. 使用百分比單位
2. 使用視窗單位（vw、vh）

CSS中的寬高比例設(shè)置

在CSS中，我們經(jīng)常需要指定元素的寬高比例，尤其是在響應(yīng)式設(shè)計(jì)和布局中，雖然不能直接通過(guò)CSS設(shè)置固定寬高比例，但我們可以通過(guò)一些技巧來(lái)實(shí)現(xiàn)這一效果。

使用百分比單位

我們可以使用百分比單位來(lái)設(shè)置元素的寬度和高度，這樣，元素的寬高比例就會(huì)隨著其父元素的尺寸變化而變化，保持一定的比例關(guān)系。

.box {
  width: 50%;   /* 寬度為父元素寬度的50% */
  height: 100%; /* 高度為父元素高度的100% */
}

使用視窗單位（vw、vh）

視窗單位是一種相對(duì)單位，允許我們定義一個(gè)長(zhǎng)度為視窗的一部分，這樣，元素的寬高比例也可以隨著視窗大小的變化而變化。

.box {
  width: 50vw;  /* 寬度為視窗寬度的50% */
  height: 50vh; /* 高度為視窗高度的50% */
}

三、使用padding和border來(lái)實(shí)現(xiàn)寬高比例

在某些情況下，我們可以通過(guò)調(diào)整元素的padding或border來(lái)實(shí)現(xiàn)特定的寬高比例，我們可以通過(guò)增加元素的padding-top和padding-bottom來(lái)間接地改變?cè)氐母叨?，從而調(diào)整其寬高比例，這種方法需要一些計(jì)算和調(diào)整，但可以實(shí)現(xiàn)一些特殊的效果。

雖然CSS本身沒(méi)有直接指定寬高比例的選項(xiàng)，但我們可以通過(guò)一些技巧和單位來(lái)實(shí)現(xiàn)這一效果，在實(shí)際應(yīng)用中，我們可以根據(jù)具體需求和場(chǎng)景選擇***合適的方法。