使用 width 和 height 可设置元素固定尺寸，如 200px 宽、100px 高；2. 百分比单位实现响应式布局，如宽度80%、高度50%；3. vw、vh、em、rem 等单位适配不同场景，如 50vw 宽、30vh 高；4. 设置 box-sizing: border-box 可让宽高包含 padding 和 border，便于布局控制。
设置元素的宽度和高度是CSS中最基础的操作之一，主要通过 width 和 height 属性来实现。你可以使用具体数值、百分比或其他相对单位来定义大小。
1. 使用 width 和 height 设置固定尺寸
给元素设置固定的宽度和高度，通常使用像素（px）作为单位。
.box {
width: 200px;
height: 100px;
background-color: #007bff;
}
这个例子中，元素的宽度为200像素，高度为100像素，背景为蓝色。
2. 使用百分比设置响应式尺寸
让元素的尺寸相对于父容器变化，适合响应式布局。
立即学习“前端免费学习笔记（深入）”；
.container {
width: 80%;
height: 50%;
margin: 0 auto;
background-color: #28a745;
}
元素宽度占父容器的80%，高度占其父元素高度的50%。注意父元素需要有明确的高度，否则百分比高度可能无效。
3. 使用其他单位（如 vw、vh、em、rem）
CSS还支持多种单位，适应不同场景：
- vw / vh：视窗宽度/高度的1%
- em：相对于当前元素或父元素的字体大小
- rem：相对于根元素（html）字体大小
.responsive-box {
width: 50vw; /* 视窗宽度的50% */
height: 30vh; /* 视窗高度的30% */
background-color: #dc3545;
}
4. 处理盒模型的影响（box-sizing）
默认情况下，元素的 padding 和 border 会增加总尺寸。为了更直观地控制宽高，推荐设置：
* {
box-sizing: border-box;
}
这样设置后，width 和 height 包含了 padding 和 border，更容易计算布局。
基本上就这些。合理使用单位和 box-sizing 能让你更精准地控制元素尺寸。
