本文目錄導讀：

1. 使用百分比設置寬度和高度
2. 使用視口單位設置寬度和高度
3. 使用flexbox布局設置寬度和高度

CSS自定義寬高設置詳解

在CSS中，我們可以通過設置元素的寬度和高度屬性來定義元素的尺寸，有時候我們可能需要為元素設置自定義的寬度和高度，這時候就需要借助一些技巧來實現。

使用百分比設置寬度和高度

我們可以將元素的寬度和高度設置為容器寬度的百分比，這樣，當容器的大小發(fā)生變化時，元素的大小也會相應地發(fā)生變化，如果我們希望將一個元素設置為容器寬度的50%，可以這樣做：

.element {
  width: 50%;
  height: 50%;
}

使用視口單位設置寬度和高度

除了百分比外，我們還可以使用視口單位（如vw、vh）來設置元素的寬度和高度，視口單位相對于視口（即瀏覽器窗口）的寬度和高度，因此它們可以確保元素的大小在不同設備和瀏覽器窗口中保持一致，如果我們希望將一個元素設置為視口寬度的30%，可以這樣做：

.element {
  width: 30vw;
  height: 30vw;
}

使用flexbox布局設置寬度和高度

如果我們希望使用更靈活的方式來設置元素的寬度和高度，可以考慮使用flexbox布局，Flexbox允許我們輕松地調整元素的大小和位置，以適應不同的屏幕大小和分辨率，我們可以將一個元素設置為flex容器中的50%寬度：

.container {
  display: flex;
}
.element {
  flex: 0 0 50%;
}

通過以上方法，我們可以輕松地實現CSS自定義寬高設置，使元素的大小和位置更加靈活和適應性強。