[分享]css单位面试题及答案

发布于 2024-11-11 14:33:01

CSS是前端技术中的重要组成部分，也是面试中常常涉及的题目。下面介绍一些CSS单位相关的面试题及其答案。1. 请简述rem、em、px、pt等CSS单位的区别。 px：像素，最常用的单位，可以精确控制...

CSS是前端技术中的重要组成部分，也是面试中常常涉及的题目。下面介绍一些CSS单位相关的面试题及其答案。

1. 请简述rem、em、px、pt等CSS单位的区别。

- px：像素，最常用的单位，可以精确控制元素的大小；
- em：相对于父元素的字体大小，如果没有定义就相对于根元素的字体大小（即<html>标签），继承父元素的字体大小，可用于控制元素间的间距；
- rem：相对于根元素的字体大小，只要定义根元素的字体大小，所有元素的大小都是相对于根元素的字体大小。可保证同一页面的所有元素大小比例一致；
- pt：印刷单位，一个pt等于1/72英寸，用于在打印机上指定字体大小。

2. 使用相对单位rem和em的优缺点分别是什么？

- 优点：
  - 随字体大小的变化而变化，实现响应式布局；
  - 可以在不同屏幕分辨率下，确保元素大小比例一致。
- 缺点：
  - em的基准点不好确定，依赖于父元素的字体大小，经常需要用到调整字体大小的hack；
  - rem需要定义根元素的字体大小，如果根元素字体大小改变，所有元素的大小都会发生变化，不易精确控制；
  - IE8及以下版本不支持rem单位。

3. 当使用%、em和rem单位时，对于文本字号和盒模型大小，如何设置默认值？

- 文本字号用em作为单位时，可以在html标签上设置一个默认字号（例如16px），所有em单位都将相对于这个字号来计算；
- 盒模型大小可以在根元素上设置一个默认值，如10px或12px，然后所有rem和em单位都相对于这个值来计算。

4. 请简述vw和vh单位的作用和优点。

- vw：视窗宽度的百分比，1vw等于视口宽度的1%。使用vw单位来设计响应式网页，元素大小可以根据屏幕宽度自动适配；
- vh：视窗高度的百分比，1vh等于视口高度的1%。使用vh单位可以方便地设置元素高度，适用于特定场景下的设计，比如全屏布局的元素。

通过对CSS单位的理解和掌握，我们可以更好地编写响应式布局和秉持移动优先的设计原则。

css 教程

一个月内的热帖推荐

[分享]css单位面试题及答案

91云脑