CSS 设置宽高的单位概览
在 CSS 中，设置宽度和高度的单位有多种，每种单位都有特定的用途和适用场景。下面是常见的单位整理及使用示例。
| 单位类型 | 代表性单位 | 使用场景 |
|---|---|---|
| 视口单位 | vw, vh | 响应式布局，全屏背景 |
| 百分比单位 | % | 相对父元素的宽高调整 |
| 绝对单位 | px, cm | 固定宽高（如图标、按钮） |
| 相对单位 | em, rem | 字体相关布局或响应式设计 |
| 内容适配单位 | auto, fit-content | 内容自适应的场景（如动态长度文本框） |
| CSS函数单位 | calc(), clamp() | 动态计算和限制宽高 |
目录
- **CSS 设置宽高的单位概览**
- @[TOC](目录)
- **1. 视口单位（Viewport Units）**
- **示例**
- **使用场景**
- **2. 百分比单位（%）**
- **示例**
- **注意事项**
- **3. 绝对单位**
- **示例**
- **注意事项**
- **4. 相对单位**
- **示例**
- **使用场景**
- **5. 内容适配单位**
- **示例**
- **使用场景**
- **6. CSS函数单位**
- **`calc()`**
- **`clamp()`**
- 最后
目录
- **CSS 设置宽高的单位概览**
- @[TOC](目录)
- **1. 视口单位（Viewport Units）**
- **示例**
- **使用场景**
- **2. 百分比单位（%）**
- **示例**
- **注意事项**
- **3. 绝对单位**
- **示例**
- **注意事项**
- **4. 相对单位**
- **示例**
- **使用场景**
- **5. 内容适配单位**
- **示例**
- **使用场景**
- **6. CSS函数单位**
- **`calc()`**
- **`clamp()`**
- 最后
1. 视口单位（Viewport Units）
视口单位基于浏览器窗口（视口）的宽度或高度，适用于响应式设计。
值得注意的是视口区域的定义：
视口代表当前可见的计算机图形区域。在 Web 浏览器术语中，通常与浏览器窗口相同，但不包括浏览器的 UI，菜单栏等，你的视口就是你现在所能见到的所有事物
| 单位 | 描述 |
|---|---|
vw | 视口宽度的 1%（1vw = 视口宽度的 1/100） |
vh | 视口高度的 1%（1vh = 视口高度的 1/100） |
vmin | 视口宽度和高度中较小值的 1% |
vmax | 视口宽度和高度中较大值的 1% |
示例
css">/* 全屏的容器 */
.container {width: 100vw; /* 占满视口宽度 */height: 100vh; /* 占满视口高度 */background-color: lightblue;
}/* 动态缩放的文本 */
.text {font-size: 5vw; /* 字体大小为视口宽度的5% */
}
使用场景
vw和vh：用于全屏布局（如全屏背景、全屏内容）。vmin和vmax：用于需要保持比例的布局，适应横屏和竖屏切换。
2. 百分比单位（%）
百分比单位是相对于父元素的尺寸计算的，适用于需要相对布局的场景。
示例
css">.container {width: 50%; /* 宽度为父元素宽度的一半 */height: 30%; /* 高度为父元素高度的 30% */background-color: lightgreen;
}
注意事项
- 父元素必须有明确的尺寸，否则百分比单位无法生效。
- 百分比高度在没有设置父元素高度时会失效。
3. 绝对单位
绝对单位用于设置固定的宽度或高度，与设备尺寸无关。
| 单位 | 描述 |
|---|---|
px | 像素（Pixel），最常用的单位 |
cm | 厘米 |
mm | 毫米 |
in | 英寸（1in = 96px） |
示例
css">.box {width: 300px; /* 宽度固定为 300 像素 */height: 150px; /* 高度固定为 150 像素 */background-color: coral;
}
注意事项
- 适用于固定布局，如按钮、图标大小。
- 在响应式设计中不推荐单独使用绝对单位。
4. 相对单位
相对单位根据上下文元素的特性（如字体大小或父元素尺寸）动态调整。
| 单位 | 描述 |
|---|---|
em | 相对于当前元素的字体大小（或父元素的字体大小） |
rem | 相对于根元素 <html> 的字体大小 |
示例
css">/* 假设根元素的字体大小为 16px */
html {font-size: 16px;
}.container {width: 10em; /* 宽度为 10 倍的字体大小（160px） */height: 5em; /* 高度为 5 倍的字体大小（80px） */font-size: 20px;
}.child {width: 5rem; /* 宽度为根字体大小的 5 倍（80px） */
}
使用场景
em：适用于需要依赖父元素字体大小的布局。rem：适用于全局一致的响应式设计。
5. 内容适配单位
内容适配单位根据内容的实际尺寸动态调整。
| 单位 | 描述 |
|---|---|
auto | 自动根据内容大小或父元素尺寸调整宽高。 |
min-content | 最小内容宽度/高度。 |
max-content | 最大内容宽度/高度。 |
fit-content | 根据内容宽度进行自适应，但有上限。 |
示例
css">.box {width: fit-content; /* 宽度根据内容自适应 */height: auto; /* 高度根据内容自适应 */background-color: lightpink;
}
使用场景
- 自动调整布局，例如动态长度的文本框。
6. CSS函数单位
CSS 提供了一些动态计算宽高的函数，常见的有 calc() 和 clamp()。
calc()
用于动态计算尺寸，支持混合单位。
css">.container {width: calc(100% - 50px); /* 总宽度减去固定间距 */height: calc(50vh + 20px); /* 基于视口高度加固定值 */
}
clamp()
限制宽高的范围。
css">.text {font-size: clamp(12px, 5vw, 24px); /* 字体大小在 12px 到 24px 之间 */
}
最后
在实际项目中：
- 响应式设计：优先使用
vw,vh,%或rem。 - 固定尺寸：适合用
px。 - 动态尺寸：善用
calc()和fit-content。
这篇文档主要侧重于实际应用上，其深入的细节、原理还没有详细介绍，感兴趣的话可以看看MDN的文档
https://developer.mozilla.org/zh-CN/docs/Web/CSS
哎，越用越觉得css内容多，真不知道怎么学了
