px

像素 pixel 的缩写，即电子屏幕上的1个点，以分辨率为 1024 * 768 的屏幕为例，即水平方向上有 1024 个点，垂直方向上有 768 个点，则 width:1024px 即表示元素的宽度撑满整个屏幕。

随屏幕分辨率不同，1px 的大小也不同，所以严格来说，px 也是相对单位，但不考虑屏幕分辨率时，也可以把 px 当作绝对单位来看待。

% 百分比

通常百分比都是相对于父元素的 content box 计算，所以父元素必须有显式的值，若父元素 height 为 auto ，则百分比值将完全失效！

以下样式的百分比计算规则比较特殊，需特别留意：

  • width、height、font-size 的百分比相对于父元素“相同属性”的值计算
  • line-height 的百分比相对于父元素的 font-size 计算
  • vertical-align 的百分比相对当前元素的 line-height 计算
  • position:absolute 绝对定位元素相对于第一个position不为 static 的祖先元素的 padding box 计算
  • position:fixed 悬浮定位元素的宽度相对于 html 计算（尺寸等同于浏览器可视窗口的大小）

【实战】撑满整个屏幕

<div class="fullScreen" style="background-color: greenyellow"></div>
  • 1.
html,
body {
  height: 100%;
  /* 清除浏览器的默认样式 */
  margin: 0px;
  padding: 0px;
}
.fullScreen {
  height: 100%;
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.

解析：

  • 范例中 div 的高度 100% 会相对于父元素（body）的高度进行计算，所以 body 必须设置 height: 100% ，而 body 的父元素是 html 标签，所以 html 也必须设置 height: 100%
  • 宽度无需设置，因为 html , body , div 的都是 display:block 块级元素，宽度都是自动撑满整个屏幕。
  • 浏览器默认会给 html , body 添加 margin 和 padding （不同浏览器的默认样式不一样），此处需手动进行清除。

【实战】响应式布局


em

相对于“当前元素”的字体大小来计算最终长度，以“当前元素” 的字体大小为 16px 为例，1em = 16px，2em 即 2*16 = 32px

最佳实践：用于维护某模块内元素间固定的比例关系，详见

【实战】首行缩进两空格

<template>
  <div style="background-color: greenyellow">
    <p>很久很久以前</p>
  </div>
</template>

<style lang="scss" scoped>
p {
  text-indent: 2em;
}
</style>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.

CSS【详解】长度单位 （ px，%，em，rem，vw，vh，vmin，vmax，ex，ch ）_响应式布局

【实战】限定中文内容宽度

article {
    max-width: 42em;
}
  • 1.
  • 2.
  • 3.

rem

相对于根元素的字体大小计算长度，以根元素（ html 标签）的 font-size 为 16px 为例，2rem 即 2*16 = 32px。

【实战】响应式布局


vw

相对于视口（浏览器的可视区域）宽度计算长度，1vw = 视口宽度的1%

  • 100 vw 即水平方向撑满屏幕

【实战】响应式布局


vh

相对于视口（浏览器的可视区域）高度计算长度，1vh = 视口高度的1%

  • 100 vh 即垂直方向撑满屏幕

【实战】响应式布局


vmin

相对于 vw 和 vh 中较小的计算长度，如手机竖屏时，1vmin = 1vw ; 手机横屏时，1vmin = 1vh ;

vmax

相对于 vw 和 vh 中较大的计算长度，如手机竖屏时，1vmax = 1vh ; 手机横屏时，1vmax = 1vw ;

ex

相对于字符 x 的高度计算长度

【实战】文字和图标垂直居中对齐


ch

相对于字符 0 的宽度计算长度

【实战】手机号的输入框

将手机号输入框的宽度设为11ch，同时让字体等宽，一眼就能看出是否输入了11位的手机号码。

<template>
  <label for="phone">手机号：</label>
  <input id="phone" class="phone_input" type="text" />
</template>

<style lang="scss" scoped>
.phone_input {
  width: 11ch;
  /*等宽字体*/
  font-family: 'Courier New', Courier, monospace;
}
</style>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.

CSS【详解】长度单位 （ px，%，em，rem，vw，vh，vmin，vmax，ex，ch ）_html_02

【实战】限定英文内容宽度

需配合等宽字体才精准。

article {
    max-width: 68ch;
}
/* 等宽字体 */
.font-mono {
    font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.