CSS 长度单位

214 阅读1分钟

vh

css3 新单位, viewpoint height 的缩写,视窗高度

vw

css3 新单位, viewpoint width 的缩写,视窗宽度

px

pixel 缩写,像素

em

1em 就是一个文字大小的宽度或高度
参考物是父元素的 font-size ,具有继承的特点(浏览器默认字体是 16px )。
如果自身定义了 font-size 按自身来计算,整个页面内 1em 不是一个固定的值。

rem

css3 新单位, root em 的缩写,
它是相对于根元素 html(网页)的 font-size ,不会像 em 那样,依赖于父元素的字体大小,而造成混乱。

%

相对于父标签宽度或高度的百分比,但不准确 \

  • 对于普通定位元素就是我们理解的父元素
  • 对于 position: absolute; 的元素是相对于已定位的父元素
  • 对于 position: fixed; 的元素是相对于 ViewPort(可视窗口)

本文参考摘录了:

  1. px、em、rem、%、vw、vh、vm这些单位的区别---常开洋
  2. CSS 常用单位---LuckyDream
  3. 基础之 css 单位---阳光与他同名