跳到主要内容

数值与长度单位

CSS 数字值有哪些类型？​

  • integer: 整数;
  • number: 实数;
  • dimension: 数字 + 单位, 如 12px、1.2pt;
width: 12px;
width: 1.2pt;

绝对长度单位有哪些？​

  • px: CSS 像素, 唯一常用绝对长度;
  • 其他绝对单位 (pt、cm) 常用于打印, 屏幕场景少用;

em 与 rem 如何计算？​

  • n em: 当前元素 font-size 的 n 倍 (继承自父元素);
  • n rem: 根元素 html 的 font-size 的 n 倍;
  • 区别: em 随层级递归, rem 只参照根字号;
body {
  font-size: 16px;
}
.slogan {
  font-size: 1.2em;
}
:root {
  font-size: 0.875em;
}
ul {
  font-size: 0.8rem;
}

视口单位如何计算？​

  • vw: 视口宽度的 1/100;
  • vh: 视口高度的 1/100;

百分比如何计算？​

  • 长度百分比: 相对 containing block 的对应尺寸;
  • 非长度百分比: 各属性另有基准 (如 padding 百分比以父容器 inline size 为基准);

calc() 如何混合单位计算？​

  • 用途: 在同一表达式里混合不同单位;
  • 运算符: 加减乘除;
  • 语法: 运算符前后必须有空格;
width: calc(100% - 80px);

如何选择字号、边框与尺寸的单位？​

  • 推荐: rem 设置字号;
  • 推荐: px 设置边框;
  • 推荐: em 设置其他大部分属性;