前端 CSS 面试题, 常见的 CSS 布局单位有哪些?

Step 1

Q:: 常见的 CSS 布局单位有哪些？

A:: 常见的 CSS 布局单位包括 px（像素）、em、rem、%（百分比）、vw（视口宽度）、vh（视口高度）、vmin（视口最小值）、vmax（视口最大值）、ch（字符单位）、ex（x高度单位）。这些单位在不同的场景下有不同的应用，例如 px 常用于固定尺寸，em 和 rem 常用于响应式布局，vw 和 vh 可用于全屏布局。

Step 2

Q:: em 和 rem 有什么区别？

A:: em 和 rem 都是相对单位，em 是相对于父元素的字体大小，而 rem 是相对于根元素（即 HTML 元素）的字体大小。rem 更适合用在需要统一控制页面整体比例的场景，而 em 更适合局部元素随其父元素动态变化的场景。

Step 3

Q:: 什么时候选择使用 % 作为布局单位？

A:: 使用 % 作为布局单位通常是在需要相对父元素进行宽度或高度调整的情况下，比如响应式布局中，容器的宽度可能需要根据浏览器窗口的宽度动态调整，这时 % 是非常常用的单位。

Step 4

Q:: vw 和 vh 在什么情况下比较有用？

A:: vw 和 vh 单位分别代表视口宽度和高度的百分比，因此在需要根据视口尺寸来设置元素的宽度和高度时非常有用。典型场景包括全屏背景、视差滚动效果、或者需要元素占据整个页面的场景。