Skip to content

CSS 尺寸单位有哪些?

参考答案:

CSS 提供了多种尺寸单位,用于设置元素的大小、位置和其他样式属性。主要的尺寸单位包括:

1. 绝对单位

  • px(像素):固定的单位,适用于设备屏幕上的精确像素。

    css
    width: 100px;
  • cm(厘米):用于印刷样式,1厘米等于约37.8像素。

    css
    margin: 2cm;
  • mm(毫米):用于印刷样式,1毫米等于约3.78像素。

    css
    padding: 10mm;
  • in(英寸):用于印刷样式,1英寸等于96像素。

    css
    font-size: 1in;
  • pt(点):印刷样式单位,1点等于1/72英寸,约为1.333像素。

    css
    line-height: 12pt;
  • pc(派卡):印刷样式单位,1派卡等于12点。

    css
    border-width: 2pc;

2. 相对单位

  • %(百分比):相对于包含块的尺寸,如父元素的宽度或高度。

    css
    width: 50%;
  • em:相对于当前元素的字体大小,1em等于当前字体的大小。

    css
    font-size: 2em;
  • rem:相对于根元素(<html>)的字体大小,1rem等于根元素的字体大小。

    css
    margin: 1rem;
  • vh(视口高度):相对于视口的高度,1vh等于视口高度的1%。

    css
    height: 50vh;
  • vw(视口宽度):相对于视口的宽度,1vw等于视口宽度的1%。

    css
    width: 50vw;
  • vmin:相对于视口的较小的宽度或高度,1vminvwvh 中较小的那个。

    css
    font-size: 2vmin;
  • vmax:相对于视口的较大的宽度或高度,1vmaxvwvh 中较大的那个。

    css
    font-size: 2vmax;
  • ch:相对于 0 字符的宽度(当前字体的数字 0 的宽度)。

    css
    width: 10ch;
  • ex:相对于当前字体的 x 高度。

    css
    height: 5ex;

3. 动态单位

  • auto:根据元素内容或布局自动计算尺寸。

    css
    width: auto;
  • min-contentmax-contentfit-content:用于定义元素尺寸的最小、最大或适应内容的尺寸。

    css
    width: min-content;

题目要点:

  • 绝对单位px, cm, mm, in, pt, pc
  • 相对单位%, em, rem, vh, vw, vmin, vmax, ch, ex
  • 动态单位auto, min-content, max-content, fit-content