(2019)[前端]面试题[5]:CSS单位那些事【px,em,rem】

  • 2019 年 11 月 13 日
  • 筆記

问题

说一下你了解的CSS的单位?

Hello,欢迎来到我的博客,每天一道面试题,我们共同进步。

解答

首先CSS长度单位分为【绝对长度单位】和【相对长度单位】

绝对长度单位

  • in 英寸
  • cm 厘米
  • mm 毫米
  • pt
  • pc

结论: 绝对长度单位表示为一个固定的值,不会改变。不利于页面渲染。所以很少人用。

相对长度单位

px

PX即像素,而像素是相对显示器屏幕分辨率而言的。

em

  • em的值并不固定
  • em继承父级元素的字体大小
  • 任意浏览器的默认字体高都是16px

rem

  • rem是CSS3中新增的单位,并且 相对的元素是html根元素(html),默认也是16px
  • 通过它既可以做到只修改根元素就 成比例的调整所有字体大小,又可以避免字体大小逐层复合的连锁反应
  • 区别em是根据父元素继承相应大小而不是固定的,rem是继承html根元素的大小
  • 只有改变根元素html的值才能改变rem的值