CSS 单位和值

CSS 单位和值是样式属性的基础，它们决定了元素的尺寸、位置、颜色等特性。理解不同的单位和值类型对于精确控制网页布局和样式至关重要。

长度单位

绝对长度单位

绝对长度单位在所有媒体上都表示固定的物理长度。

px (像素)

像素是最常用的单位，是数字显示设备上的一个点。

.element {
  width: 200px;
  font-size: 16px;
  border: 1px solid black;
}

其他绝对单位

.inches {
  width: 1in; /* 1 英寸 = 96px */
}

.centimeters {
  width: 2.54cm; /* 1 英寸 = 2.54 厘米 */
}

.millimeters {
  width: 25.4mm; /* 1 厘米 = 10 毫米 */
}

.points {
  font-size: 12pt; /* 1 点 = 1/72 英寸 */
}

.picas {
  width: 6pc; /* 1 派卡 = 12 点 */
}

相对长度单位

相对长度单位相对于其他元素或视口尺寸。

% (百分比)

百分比相对于父元素的相应属性。

.half-width {
  width: 50%; /* 父元素宽度的 50% */
}

.double-height {
  height: 200%; /* 父元素高度的 200% */
}

em

em 单位相对于元素的字体大小。如果用于字体大小，相对于父元素的字体大小。

.text {
  font-size: 1.2em; /* 相对于父元素字体大小 */
  padding: 1em; /* 相对于当前元素字体大小 */
}

.nested {
  font-size: 1.2em; /* 相对于父元素字体大小 */
}
/* 如果父元素字体大小是 16px，那么 .nested 的字体大小是 19.2px */

rem

rem 单位相对于根元素（html）的字体大小。

html {
  font-size: 16px;
}

.text {
  font-size: 1.2rem; /* 总是相对于根元素字体大小，即 19.2px */
  margin: 2rem; /* 总是 32px */
}

ex 和 ch

• ex: 相对于字符 "x" 的高度
• ch: 相对于字符 "0" 的宽度

.ex-unit {
  line-height: 2ex;
}

.ch-unit {
  width: 20ch; /* 大约 20 个字符的宽度 */
}

视口百分比长度

vw (视口宽度)

vw 单位相对于视口宽度的百分比。

.full-width {
  width: 100vw; /* 视口宽度的 100% */
}

.half-width {
  width: 50vw; /* 视口宽度的 50% */
}

vh (视口高度)

vh 单位相对于视口高度的百分比。

.full-height {
  height: 100vh; /* 视口高度的 100% */
}

.half-height {
  height: 50vh; /* 视口高度的 50% */
}

vmin 和 vmax

• vmin: 视口宽度和高度中较小值的百分比
• vmax: 视口宽度和高度中较大值的百分比

.square {
  width: 50vmin;
  height: 50vmin; /* 创建一个正方形，边长为视口较小尺寸的 50% */
}

.large-element {
  width: 80vmax; /* 占据视口较大尺寸的 80% */
}

颜色值

颜色关键字

CSS 定义了 148 个颜色关键字。

.red {
  color: red;
}

.blue {
  background-color: blue;
}

.transparent {
  color: transparent;
}

十六进制颜色

十六进制颜色由 # 和 3 位或 6 位十六进制数组成。

.short {
  color: #f00; /* 红色 */
}

.long {
  color: #ff0000; /* 红色 */
}

.with-alpha {
  color: #ff000080; /* 带透明度的红色 */
}

RGB 颜色

RGB 颜色由红、绿、蓝三原色组成。

.rgb {
  color: rgb(255, 0, 0); /* 红色 */
}

.rgba {
  color: rgba(255, 0, 0, 0.5); /* 半透明红色 */
}

HSL 颜色

HSL 颜色由色相（Hue）、饱和度（Saturation）、亮度（Lightness）组成。

.hsl {
  color: hsl(0, 100%, 50%); /* 红色 */
}

.hsla {
  color: hsla(0, 100%, 50%, 0.5); /* 半透明红色 */
}

currentColor

currentColor 关键字表示当前元素的 color 属性值。

.element {
  color: blue;
  border: 2px solid currentColor; /* 边框颜色与文字颜色相同 */
}

数字和函数值

数字 (number)

无单位的数值。

.opacity {
  opacity: 0.5;
}

.scale {
  transform: scale(1.2);
}

整数 (integer)

整数值。

.z-index {
  z-index: 10;
}

.column-count {
  column-count: 3;
}

函数值

calc()

calc() 函数允许进行数学计算。

.dynamic-width {
  width: calc(100% - 40px);
}

.complex-calc {
  width: calc(50% + 20px - 1em);
}

attr()

attr() 函数返回元素属性的值。

a::after {
  content: " (" attr(href) ")";
}

url()

url() 函数用于指定资源路径。

.background {
  background-image: url('image.jpg');
}

.cursor {
  cursor: url('cursor.cur'), pointer;
}

角度单位

deg (度)

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

grad (梯度)

.rotate {
  transform: rotate(50grad); /* 50 梯度 = 45 度 */
}

rad (弧度)

.rotate {
  transform: rotate(0.785rad); /* 0.785 弧度 ≈ 45 度 */
}

turn (转)

.rotate {
  transform: rotate(0.125turn); /* 0.125 转 = 45 度 */
}

时间单位

s (秒)

.duration {
  transition-duration: 2s;
}

ms (毫秒)

.duration {
  transition-duration: 300ms;
}

频率单位

Hz (赫兹)

.speech {
  voice-pitch: 200Hz;
}

kHz (千赫兹)

.speech {
  voice-pitch: 0.2kHz;
}

分辨率单位

dpi (每英寸点数)

.high-res {
  resolution: 300dpi;
}

dpcm (每厘米点数)

.print {
  resolution: 118dpcm;
}

dppx (每像素点数)

.retina {
  resolution: 2dppx;
}

自定义属性 (CSS 变量)

自定义属性允许定义可重用的值。

:root {
  --main-color: #3498db;
  --spacing-unit: 1rem;
  --border-radius: 4px;
}

.element {
  color: var(--main-color);
  padding: var(--spacing-unit);
  border-radius: var(--border-radius);
}

全局值

initial

设置属性为其初始值。

.element {
  color: initial; /* 设置为 color 属性的初始值 */
}

inherit

继承父元素的值。

.element {
  color: inherit; /* 继承父元素的 color 值 */
}

unset

如果属性自然继承，则表现为 inherit，否则表现为 initial。

.element {
  color: unset;
}

revert

重置为 UA 样式表中定义的值。

.element {
  display: revert;
}

实际应用示例

响应式字体大小

html {
  font-size: 16px;
}

@media (min-width: 768px) {
  html {
    font-size: 18px;
  }
}

@media (min-width: 1200px) {
  html {
    font-size: 20px;
  }
}

.text {
  font-size: 1.2rem; /* 响应式字体大小 */
}

流体布局

.container {
  width: calc(100% - 2rem);
  margin: 1rem;
}

.column {
  width: calc(50% - 1rem);
  float: left;
  margin-right: 1rem;
}

视口单位的应用

.hero {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.full-width-banner {
  width: 100vw;
  background: linear-gradient(to right, #ff0000, #0000ff);
}

CSS 变量的实际使用

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --text-color: #333;
  --spacing-small: 0.5rem;
  --spacing-medium: 1rem;
  --spacing-large: 2rem;
  --border-radius: 4px;
}

.button {
  background-color: var(--primary-color);
  color: white;
  padding: var(--spacing-medium);
  border-radius: var(--border-radius);
  border: none;
  cursor: pointer;
}

.button:hover {
  background-color: var(--secondary-color);
}

.card {
  padding: var(--spacing-large);
  margin: var(--spacing-small);
  border-radius: var(--border-radius);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

单位选择建议

1. 字体大小：使用 rem 单位以确保可访问性
2. 组件间距：使用 em 或 rem 单位以保持比例关系
3. 布局宽度：使用 %、vw 或 flexbox/grid 以实现响应式设计
4. 边框和阴影：使用 px 以保持精确控制
5. 媒体查询：使用 em 或 rem 单位以匹配字体大小变化

浏览器兼容性

• 大多数单位在所有现代浏览器中都有良好支持
• 视口单位 (vw, vh, vmin, vmax) 在 IE9+ 支持
• CSS 变量在 IE 不支持，需要在其他现代浏览器中使用
• calc() 在 IE9+ 支持，但某些复杂表达式可能不支持

总结

理解 CSS 单位和值对于精确控制网页样式和布局至关重要。不同的单位适用于不同的场景，合理选择单位可以帮助我们创建响应式、可维护和可访问的网页。掌握这些概念是成为优秀前端开发人员的基础。