前言
在 CSS 中，宽度（width）和高度（height）属性用于设置元素的尺寸，控制元素在页面中所占的水平和垂直空间。我们在之前的文中，已多次用到，今天来细致聊一下它的更多用法。
宽/高度属性值类型
CSS 中的宽度和高度属性值可以设置的类型包括：
1. 像素（px）：指定具体的像素值作为宽度或高度。
2. 百分比（%）：相对于父元素的百分比来设置宽度或高度。
3. inherit（继承）：表示元素将继承父元素的宽度或高度值。这个用的不多。
4. auto（自动）：表示元素的宽度或高度将根据内容自动调整。对于宽度属性，大多用在自适应布局中，特别是对于一些动态内容或者需要根据内容自动调整大小的元素。
5. 视窗单位（vw、vh）：这是 CSS3 里面的属性也稍微提一下，这个是相对于视口大小的单位，vw 表示视口宽度的百分比，vh 表示视口高度的百分比。例如，50vh，就代表可视窗口 50% 的高度。
以下代码，展示了一个元素的宽度使用百分比（50%）和高度使用像素（200px）的情况：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Width and Height Example</title>
<style>
.box {
width: 50%;
height: 200px;
background-color: #98b1f1;
}
</style>
</head>
<body>
<div class="box">这是一个示例文本框，宽度为父元素宽度的 50%，高度为固定的 200px。