CSS 设置宽高的单位概览

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

目录

• • **CSS 设置宽高的单位概览**
  • @[TOC](目录)
  • • **1. 视口单位（Viewport Units）**
    • • **示例**
      • **使用场景**
    • **2. 百分比单位（%）**
    • • **示例**
      • **注意事项**
    • **3. 绝对单位**
    • • **示例**
      • **注意事项**
    • **4. 相对单位**
    • • **示例**
      • **使用场景**
    • **5. 内容适配单位**
    • • **示例**
      • **使用场景**
    • **6. CSS函数单位**
    • • **`calc()`**
      • **`clamp()`**
    • 最后

1. 视口单位（Viewport Units）

视口单位基于浏览器窗口（视口）的宽度或高度，适用于响应式设计。

值得注意的是视口区域的定义：

视口代表当前可见的计算机图形区域。在 Web 浏览器术语中，通常与浏览器窗口相同，但不包括浏览器的 UI，菜单栏等，你的视口就是你现在所能见到的所有事物

示例

/* 全屏的容器 */
.container {
    width: 100vw; /* 占满视口宽度 */
    height: 100vh; /* 占满视口高度 */
    background-color: lightblue;
}

/* 动态缩放的文本 */
.text {
    font-size: 5vw; /* 字体大小为视口宽度的5% */
}

使用场景

• vw 和 vh：用于全屏布局（如全屏背景、全屏内容）。
• vmin 和 vmax：用于需要保持比例的布局，适应横屏和竖屏切换。

2. 百分比单位（%）

百分比单位是相对于父元素的尺寸计算的，适用于需要相对布局的场景。

示例

.container {
    width: 50%; /* 宽度为父元素宽度的一半 */
    height: 30%; /* 高度为父元素高度的 30% */
    background-color: lightgreen;
}

注意事项

• 父元素必须有明确的尺寸，否则百分比单位无法生效。
• 百分比高度在没有设置父元素高度时会失效。

3. 绝对单位

绝对单位用于设置固定的宽度或高度，与设备尺寸无关。

示例

.box {
    width: 300px; /* 宽度固定为 300 像素 */
    height: 150px; /* 高度固定为 150 像素 */
    background-color: coral;
}

注意事项

• 适用于固定布局，如按钮、图标大小。
• 在响应式设计中不推荐单独使用绝对单位。

4. 相对单位

相对单位根据上下文元素的特性（如字体大小或父元素尺寸）动态调整。

示例

/* 假设根元素的字体大小为 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. 内容适配单位

内容适配单位根据内容的实际尺寸动态调整。

示例

.box {
    width: fit-content; /* 宽度根据内容自适应 */
    height: auto; /* 高度根据内容自适应 */
    background-color: lightpink;
}

使用场景

• 自动调整布局，例如动态长度的文本框。

6. CSS函数单位

CSS 提供了一些动态计算宽高的函数，常见的有 calc() 和 clamp()。

calc()

用于动态计算尺寸，支持混合单位。

.container {
    width: calc(100% - 50px); /* 总宽度减去固定间距 */
    height: calc(50vh + 20px); /* 基于视口高度加固定值 */
}

clamp()

限制宽高的范围。

.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内容多，真不知道怎么学了