CSS 设置宽高的单位概览

在 CSS 中，设置宽度和高度的单位有多种，每种单位都有特定的用途和适用场景。下面是常见的单位整理及使用示例。

单位类型	代表性单位	使用场景
视口单位	`vw`, `vh`	响应式布局，全屏背景
百分比单位	`%`	相对父元素的宽高调整
绝对单位	`px`, `cm`	固定宽高（如图标、按钮）
相对单位	`em`, `rem`	字体相关布局或响应式设计
内容适配单位	`auto`, `fit-content`	内容自适应的场景（如动态长度文本框）
CSS函数单位	`calc()`, `clamp()`	动态计算和限制宽高

### 目录

[**CSS 设置宽高的单位概览**](#目录 CSS 设置宽高的单位概览 @TOC 1. 视口单位（Viewport Units） 示例 使用场景 2. 百分比单位（%） 示例 注意事项 3. 绝对单位 示例 注意事项 4. 相对单位 示例 使用场景 5. 内容适配单位 示例 使用场景 6. CSS函数单位 calc() clamp() 最后)
[@[TOC](目录)](#目录 CSS 设置宽高的单位概览 @TOC 1. 视口单位（Viewport Units） 示例 使用场景 2. 百分比单位（%） 示例 注意事项 3. 绝对单位 示例 注意事项 4. 相对单位 示例 使用场景 5. 内容适配单位 示例 使用场景 6. CSS函数单位 calc() clamp() 最后)
[**1. 视口单位（Viewport Units）**](#目录 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() 最后)
[**使用场景**](#目录 CSS 设置宽高的单位概览 @TOC 1. 视口单位（Viewport Units） 示例 使用场景 2. 百分比单位（%） 示例 注意事项 3. 绝对单位 示例 注意事项 4. 相对单位 示例 使用场景 5. 内容适配单位 示例 使用场景 6. CSS函数单位 calc() clamp() 最后)
[**2. 百分比单位（%）**](#目录 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() 最后)
[**注意事项**](#目录 CSS 设置宽高的单位概览 @TOC 1. 视口单位（Viewport Units） 示例 使用场景 2. 百分比单位（%） 示例 注意事项 3. 绝对单位 示例 注意事项 4. 相对单位 示例 使用场景 5. 内容适配单位 示例 使用场景 6. CSS函数单位 calc() clamp() 最后)
[**3. 绝对单位**](#目录 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() 最后)
[**注意事项**](#目录 CSS 设置宽高的单位概览 @TOC 1. 视口单位（Viewport Units） 示例 使用场景 2. 百分比单位（%） 示例 注意事项 3. 绝对单位 示例 注意事项 4. 相对单位 示例 使用场景 5. 内容适配单位 示例 使用场景 6. CSS函数单位 calc() clamp() 最后)
[**4. 相对单位**](#目录 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() 最后)
[**使用场景**](#目录 CSS 设置宽高的单位概览 @TOC 1. 视口单位（Viewport Units） 示例 使用场景 2. 百分比单位（%） 示例 注意事项 3. 绝对单位 示例 注意事项 4. 相对单位 示例 使用场景 5. 内容适配单位 示例 使用场景 6. CSS函数单位 calc() clamp() 最后)
[**5. 内容适配单位**](#目录 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() 最后)
[**使用场景**](#目录 CSS 设置宽高的单位概览 @TOC 1. 视口单位（Viewport Units） 示例 使用场景 2. 百分比单位（%） 示例 注意事项 3. 绝对单位 示例 注意事项 4. 相对单位 示例 使用场景 5. 内容适配单位 示例 使用场景 6. CSS函数单位 calc() clamp() 最后)
[**6. CSS函数单位**](#目录 CSS 设置宽高的单位概览 @TOC 1. 视口单位（Viewport Units） 示例 使用场景 2. 百分比单位（%） 示例 注意事项 3. 绝对单位 示例 注意事项 4. 相对单位 示例 使用场景 5. 内容适配单位 示例 使用场景 6. CSS函数单位 calc() clamp() 最后)
[**`calc()`**](#目录 CSS 设置宽高的单位概览 @TOC 1. 视口单位（Viewport Units） 示例 使用场景 2. 百分比单位（%） 示例 注意事项 3. 绝对单位 示例 注意事项 4. 相对单位 示例 使用场景 5. 内容适配单位 示例 使用场景 6. CSS函数单位 calc() clamp() 最后)
[**`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内容多，真不知道怎么学了