如何使用 CSS 设置元素的高度和宽度？

在CSS中设置元素的高度和宽度，主要使用 height 和 width 属性。这两个属性可以接受不同类型的值，如像素(px)、百分比(%)、em、vw/vh等。下面是几种常见的设置方式：

1. 使用像素值设置固定宽度和高度

css
div {
  width: 300px;   /* 宽度为300像素 */
  height: 150px;  /* 高度为150像素 */
}

这种方法适用于你需要给元素一个固定大小的情况。

2. 使用百分比设置响应式宽度和高度

css
.container {
  width: 100%;   /* 宽度占满容器的100% */
}

.content {
  height: 50%;   /* 高度为其父元素的50% */
}

使用百分比可以创建响应式的布局，元素的大小会根据父元素的大小动态调整。

3. 使用视口单位

css
section {
  width: 100vw;  /* 宽度是视口宽度的100% */
  height: 100vh; /* 高度是视口高度的100% */
}

视口单位（如vw和vh）是基于视口尺寸的一种单位，1vw等于视口宽度的1%，1vh等于视口高度的1%。这种单位非常适合创建全屏页面。

4. 使用自动（auto）

css
aside {
  width: auto;  /* 宽度根据内容自动调整 */
  height: auto; /* 高度根据内容自动调整 */
}

当你设置宽度或高度为auto时，元素的尺寸将根据其内容自动调整。

示例场景

假设你正在开发一个响应式的网站布局，你可能会用到百分比来设置主内容区和侧边栏的宽度：

css
.main-content {
  width: 75%;
}

.sidebar {
  width: 25%;
}

这样，不论屏幕大小如何变化，主内容区总是占据75%的宽度，侧边栏占据25%的宽度，从而达到响应式布局的效果。

以上就是在CSS中设置元素高度和宽度的几种常用方法，你可以根据具体需求选择合适的方法。