岩石教程

css中单位的详细描述(px em rem vh vw vmin vmax ch ex lh)

2024-07-25 10:28:42 307
CSS 中的单位用于指定长度、宽度、字体大小等属性。不同的单位有不同的特点和适用场景。以下是所有常见的 CSS 单位及其详细描述：

绝对单位

绝对单位是固定的，不会随视口或其他元素的大小变化。

单位描述示例适用场景
px像素，固定大小font-size: 16px;需要精确控制尺寸的场景

相对单位

相对单位根据上下文环境或根元素进行计算。

单位描述相对参考示例适用场景
%百分比父元素的相应属性值width: 50%;宽度、高度、内外边距等
em相对当前元素的字体大小当前元素的 font-sizepadding: 2em;内外边距、字体大小，相对于父元素变化
rem相对根元素的字体大小根元素的 font-sizemargin: 1rem;全局统一控制字体大小和布局
vh视口高度的百分比视口高度height: 50vh;高度、内外边距，响应视口高度变化
vw视口宽度的百分比视口宽度width: 50vw;宽度、内外边距，响应视口宽度变化
vmin视口宽度和高度中较小的百分比视口宽度或高度font-size: 5vmin;字体大小、内外边距，响应最小视口尺寸
vmax视口宽度和高度中较大的百分比视口宽度或高度font-size: 5vmax;字体大小、内外边距，响应最大视口尺寸
ch相对“0”字符的宽度当前字体的 0 字符宽度width: 20ch;宽度、内外边距，相对字符宽度
ex相对小写字母 x 的高度当前字体的小写 x 高度font-size: 2ex;字体大小、内外边距，相对字符高度
lh相对当前行高当前元素的行高margin-bottom: 2lh;内外边距，相对行高

详细描述与示例

px（像素）

  • 描述: 固定单位，表示显示设备上的一个物理像素点。
  • 示例: 
    .example {
  font-size: 16px;
  width: 100px;
  height: 50px;
}

em（相对单位）

  • 描述: 相对当前元素的字体大小。例如，若当前元素的 font-size 是 16px，那么 1em 就等于 16px。
  • 示例: 
    .example {
  font-size: 16px; /* 基础字体大小 */
  padding: 2em;    /* 32px */
}

rem（根元素相对单位）

  • 描述: 相对根元素（<html>）的字体大小。例如，若根元素的 font-size 是 16px，那么 1rem 就等于 16px。
  • 示例: 
    :root {
  font-size: 16px; /* 根元素字体大小 */
}
.example {
  font-size: 1.5rem; /* 24px */
  margin: 2rem;      /* 32px */
}

vh（视口高度）

  • 描述: 视口高度的百分比。1vh 等于视口高度的 1%。
  • 示例: 
    .example {
  height: 50vh; /* 视口高度的 50% */
}

vw（视口宽度）

  • 描述: 视口宽度的百分比。1vw 等于视口宽度的 1%。
  • 示例: 
    .example {
  width: 50vw; /* 视口宽度的 50% */
}

vmin（最小视口单位）

  • 描述: 视口宽度和高度中较小的那个的百分比。1vmin 等于视口宽度或高度中较小者的 1%。
  • 示例: 
    .example {
  font-size: 5vmin; /* 视口宽度和高度中较小者的 5% */
}

vmax（最大视口单位）

  • 描述: 视口宽度和高度中较大的那个的百分比。1vmax 等于视口宽度或高度中较大者的 1%。
  • 示例: 
    .example {
  font-size: 5vmax; /* 视口宽度和高度中较大者的 5% */
}

ch（字符宽度）

  • 描述: 相对当前字体中数字“0”的宽度。
  • 示例: 
    .example {
  width: 20ch; /* 相当于 20 个“0”字符的宽度 */
}

ex（x 高度）

  • 描述: 相对当前字体的小写字母“x”的高度。
  • 示例: 
    .example {
  font-size: 2ex; /* 相当于 2 个小写字母“x”的高度 */
}

lh（行高）

  • 描述: 相对当前元素的行高。
  • 示例: 
    .example {
  margin-bottom: 2lh; /* 相当于 2 倍的行高 */
}

选择合适单位的建议

  • 精确控制尺寸: 使用 px。
  • 相对字体大小调整: 使用 em 或 rem。
  • 响应式设计: 使用 vh, vw, vmin, vmax。
  • 相对字符尺寸: 使用 ch, ex。
  • 相对行高调整: 使用 lh。

通过合理选择和组合这些单位，可以实现灵活和高效的 CSS 设计，适应各种不同的需求和场景。