面试题：CSS中百分比与vw/vh在布局中的差异

Question

请阐述在CSS布局中，百分比和vw/vh这两种单位在计算方式和应用场景上有哪些主要差异。以一个简单的页面导航栏布局为例，说明何时使用百分比更合适，何时使用vw/vh更合适。

Answer 1

计算方式差异

• 百分比（%）：
  • 相对于父元素的相应属性值计算。例如，宽度设置为50%，则相对于父元素宽度的50%。如果是高度设置百分比，若父元素高度未显式指定，子元素基于百分比设置高度可能无效。对于内边距（padding）和外边距（margin），如果设置为百分比，无论是水平还是垂直方向，都相对于父元素的宽度计算。
• vw/vh：
  • vw（视口宽度Viewport Width）：1vw等于视口宽度的1%。视口宽度是浏览器窗口的宽度，不包括浏览器的滚动条等边框。
  • vh（视口高度Viewport Height）：1vh等于视口高度的1%。例如，设置元素宽度为50vw，无论父元素宽度如何，它始终是视口宽度的50%。

应用场景差异

• 百分比：
  • 适用于元素间有明确的层级关系且相对父元素尺寸布局的场景。比如在一个常规的响应式网页布局中，内部子元素基于父容器进行尺寸缩放，像侧边栏宽度基于父容器宽度按比例调整。
• vw/vh：
  • 适用于创建与视口大小紧密相关的布局，特别是在需要创建全屏布局、固定尺寸元素（基于视口）的场景。例如，创建一个始终占据视口一定比例高度的导航栏，或创建一个固定在视口某个位置且大小基于视口尺寸的按钮。

页面导航栏布局示例

• 使用百分比更合适的场景：
  • 当导航栏是基于页面整体的某个容器进行布局时。比如整个页面有一个居中的内容容器，导航栏作为该容器的子元素，其宽度需要根据容器宽度按比例变化，此时使用百分比合适。例如：

.container {
  width: 80%;
  margin: 0 auto;
}
.navbar {
  width: 100%;
  background-color: #333;
  color: white;
}

• 这里导航栏宽度设置为100%，是相对于其父容器.container的宽度，随着.container宽度因屏幕尺寸变化而按比例改变，导航栏宽度也会相应按比例改变。
• 使用vw/vh更合适的场景：
  • 当希望导航栏始终占据视口一定比例高度，无论页面内部结构如何变化时。例如，想要一个始终占据视口高度8%的导航栏：

.navbar {
  height: 8vh;
  background-color: #333;
  color: white;
}

• 这样在不同设备屏幕高度下，导航栏始终保持视口高度8%的高度，提供了更一致的视觉体验，特别是在全屏布局或强调导航栏固定占比的设计中。