小八博客

Appearance

CSS值和单位 ​

在 CSS（层叠样式表）中，值和单位用于定义各种属性（如宽度、高度、边距、字体大小等）。这些值和单位可以分为多个类别，主要包括长度单位、百分比单位、颜色值、时间单位、角度单位等。以下是常见的 CSS 值和单位分类：

1. 长度单位（Length Units） ​

长度单位用于指定元素的尺寸（如 width、height、margin、padding 等）。

绝对单位（Absolute Unit ​

绝对单位的值是固定的，不会随屏幕或父元素大小变化：

  • px（像素，1px = 1/96th of 1in）：最常用的单位，如 font-size: 16px;
  • pt（点/磅，1pt = 1/72 英寸）：常用于印刷排版
  • pc（pica/派卡，1pc = 12pt）
  • in（英寸，1in = 2.54cm = 96px）
  • cm（厘米，1cm = 37.8px = 25.2/64in）
  • mm（毫米，1mm = 1/10th of 1cm）
  • Q (四分之一毫米，1Q = 1/40th of 1cm)

示例：

css
p {
  font-size: 14px;
  margin: 2cm;
}

相对单位（Relative Units） ​

相对单位的值根据环境（如父元素、根元素或视口大小）进行调整：

  • %（百分比）：相对于父元素的尺寸
  • em（相对于父元素的 font-size）
  • rem（相对于根元素 <html> 的 font-size）
  • vw（视口宽度的 1%）
  • vh（视口高度的 1%）
  • vmin（视口宽度和高度的较小值的 1%）
  • vmax（视口宽度和高度的较大值的 1%）
  • ch（相对于数字“0”的宽度）
  • ex（相对于小写 x 的高度）

示例：

css
html {
  font-size: 16px;
}

body {
  font-size: 1.5rem; /* 1.5 × 16px = 24px */
}

.container {
  width: 80vw; /* 80% 视口宽度 */
  height: 50vh; /* 50% 视口高度 */
}

2. 百分比单位（%） ​

  • width: 50% —— 表示相对于父元素宽度的 50%
  • height: 100% —— 表示相对于父元素高度的 100%
  • margin: 10% —— 表示相对于父元素宽度的 10%

示例：

css
.container {
  width: 80%;
  height: 50%;
  padding: 5%;
}

3. 颜色单位（Color Values） ​

CSS 颜色可以使用不同的格式：

  • 十六进制颜色（Hex）：#RRGGBB 或 #RGB
css
color: #ff0000; /* 红色 */
  • RGB 颜色：rgb(r, g, b)
css
color: rgb(255, 0, 0); /* 红色 */
  • RGBA 颜色（带透明度）：rgba(r, g, b, a)
    • 0完全透明
    • 1 完全不透明
css
color: rgba(255, 0, 0, 0.5); /* 半透明红色 */
  • HSL 颜色（色相、饱和度、亮度）：hsl(h, s%, l%)
css
color: hsl(0, 100%, 50%); /* 红色 */
  • HSLA 颜色（带透明度）：hsla(h, s%, l%, a)
css
color: hsla(0, 100%, 50%, 0.5); /* 半透明红色 */

4. 时间单位（Time Units） ​

用于动画和过渡效果：

  • s（秒）
  • ms（毫秒，1s = 1000ms）

示例：

css
.animation {
  transition: all 0.5s ease-in-out;
}

5. 角度单位（Angle Units） ​

用于旋转、渐变等：

  • deg（度数）：360deg 表示一整圈
  • rad（弧度）：1rad ≈ 57.3deg
  • grad（梯度）：400grad = 360deg
  • turn（完整旋转圈数）：1turn = 360deg

示例：

css
.rotate {
  transform: rotate(45deg);
}

6. 频率单位（Frequency Units） ​

用于声音相关的 CSS 属性：

  • Hz（赫兹）
  • kHz（千赫兹）

示例：

css
@media (speech) {
  body {
    voice-pitch: 440Hz;
  }
}

7. 分数单位（Fractional Units，fr） ​

用于 CSS Grid 布局，表示可用空间的比例：

css
.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 三列，占比 1:2:1 */
}

8. 其他特殊值 ​

  • auto：自动计算值（如 width: auto;）
  • inherit：继承父元素的值
  • initial：使用 CSS 规范的默认值
  • unset：如果属性是继承的，则继承，否则使用初始值
  • calc()：动态计算值
css
width: calc(100% - 50px);

总结 ​

类别常见单位适用场景
绝对长度px, cm, mm, in, pt, pc固定尺寸，如打印
相对长度%, em, rem, vw, vh, vmin, vmax相对于父元素或视口
颜色#RRGGBB, rgb(), hsl()设置字体、背景、边框颜色
时间s, ms过渡、动画
角度deg, rad, turn旋转、渐变
频率Hz, kHz语音 CSS
网格frCSS Grid 布局
其他auto, inherit, initial, calc()灵活计算

数据类型 ​

数值类型描述
<integer><integer> 是一个整数，比如 1024 或 -55。
<number><number> 表示一个小数——它可能有小数点后面的部分，也可能没有，例如 0.255、128 或 -1.2。
<dimension><dimension> 是一个 <number> 它有一个附加的单位，例如 45deg、5s 或 10px。<dimension> 是一个伞形类别，包括 <length>、<angle>、<time> 和 <resolution>类型。
<percentage><percentage> 表示一些其他值的一部分，例如 50%。百分比值总是相对于另一个量。例如，一个元素的长度相对于其父元素的长度。

评论区

欢迎留言、补充或勘误。

xiaoba.blog

Copyright © 2023-2026 小八