前言
在前端开发面试中，理解和熟练运用CSS长度单位以及掌握隐藏容器的方法是关键技能之一。面试官常常会考察候选人对这些概念的理解和应用能力。本文将详细讨论常见的CSS长度单位（如em、px、rem、vw、vh）及它们的区别，以及多种隐藏容器的方法和它们的特点。通过这些内容，希望能够为准备面试的开发者提供实用的知识和技巧，使其能够在面试中展现出色的表现。
关于单位 em、px、rem、vw、vh 的区别：
-
em：
- 是什么：相对于父元素的字体大小。1em 等于父元素的字体大小。
- 如何使用：常用于设置字体大小，或者相对于父元素设置长度单位。
-
px：
- 是什么：像素，相对于显示器的物理像素。
- 如何使用：常用于固定长度的布局和样式。
-
rem：
- 是什么：相对于根元素（
html元素）的字体大小。 - 如何使用：在响应式设计中常用，相对于根元素的字体大小来定义长度单位，具有全局性。
- 是什么：相对于根元素（
-
vw：
- 是什么：视口宽度的百分比，1vw 等于视口宽度的1%。
- 如何使用：常用于响应式设计中，根据视口宽度调整元素的大小。
-
vh：
- 是什么：视口高度的百分比，1vh 等于视口高度的1%。
- 如何使用：类似于vw，但是是根据视口高度来调整元素的大小。
CSS 中的隐藏容器方式及其区别：
-
display: none;
- 特点：元素不会在页面中占据空间，且无法通过 JavaScript 绑定事件。
- 适用场景：完全不显示元素。
-
opacity: 0;
- 特点：元素占据页面空间，只是不可见，可以通过 JavaScript 绑定事件。
- 适用场景：保留元素占位但隐藏其内容。
-
width: 0; height: 0;
- 特点：元素不占据页面空间，无法通过 JavaScript 绑定事件。
- 适用场景：隐藏元素但保留其结构。
-
visibility: hidden;
- 特点：元素占据页面空间，只是不可见，无法通过 JavaScript 绑定事件。
- 适用场景：保留元素占位但隐藏其内容，与opacity: 0;不同之处在于会保留元素的占位。
-
clip-path: polygon(0 0, 0 0, 0 0, 0 0);
- 特点：元素占据页面空间，只是不可见，可以通过 JavaScript 绑定事件。
- 适用场景：复杂形状隐藏元素，但仍保留事件绑定能力。
-
position: absolute; top: -9999px;
- 特点：元素不在页面视觉范围内，无法通过 JavaScript 绑定事件。
- 适用场景：将元素移除可见区域，但保留结构。
-
transform: translate(0, 0);
- 特点：元素占据页面空间，只是不可见，可以通过 JavaScript 绑定事件。
- 适用场景：利用 CSS 变换移动元素出可见区域。
-
z-index: -9999;
- 特点：元素占据页面空间，只是不可见，可以通过 JavaScript 绑定事件。
- 适用场景：调整层叠顺序，使元素不可见。
-
overflow: hidden;
- 特点：元素占据页面空间，只是不可见，可以通过 JavaScript 绑定事件。
- 适用场景：隐藏元素的溢出部分，但保留其占位。
简单示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS长度单位与隐藏容器方法</title>
<style>
/* 使用不同的长度单位来设置字体大小 */
.parent {
font-size: 16px; /* 假设根元素字体大小为16px */
}
.child {
font-size: 1em; /* 相对于父元素字体大小，即16px */
width: 20px; /* 使用固定像素单位 */
height: 3rem; /* 相对于根元素字体大小的倍数，即3 * 16px = 48px */
padding: 2vw; /* 相对于视口宽度的百分比，例如视口宽度为1000px时，padding为20px */
margin-top: 5vh; /* 相对于视口高度的百分比，例如视口高度为800px时，margin-top为40px */
}
/* 使用不同的隐藏容器方法 */
.hidden-example {
display: none; /* 完全隐藏元素 */
opacity: 0; /* 透明度为0，元素占位但不可见 */
width: 0; height: 0; /* 宽度和高度为0，元素占位但不可见 */
visibility: hidden; /* 可见性为隐藏，元素占位但不可见 */
clip-path: polygon(0 0, 0 0, 0 0, 0 0); /* 使用clip-path隐藏元素，元素占位但不可见 */
}
</style>
</head>
<body>
<div class="parent">
<div class="child">示例:666</div>
</div>
<div class="hidden-example">隐藏:666</div>
</body>
</html>
解释：
-
CSS长度单位的应用：
.parent中的字体大小设置为16px，.child中的font-size: 1em;表示相对于.parent的字体大小，因此实际上是16px。width: 100px;使用了像素单位，宽度固定为100像素。height: 3rem;使用了相对根元素的rem单位，高度为3倍的根元素字体大小（16px * 3 = 48px）。padding: 2vw;和margin-top: 5vh;分别使用了视口宽度和高度的百分比单位，以适应不同视口尺寸的响应式设计。
-
隐藏容器方法的演示：
.hidden-example通过不同的CSS属性演示了五种隐藏容器的方法，包括display: none;、opacity: 0;、width: 0; height: 0;、visibility: hidden;和clip-path: polygon(0 0, 0 0, 0 0, 0 0);。每种方法都有其独特的隐藏效果和占位特性。
小结
本文首先探讨了em、px、rem、vw、vh这几种常见的CSS长度单位。em是相对于父元素字体大小的单位，px是固定像素单位，rem是相对于根元素的字体大小，vw和vh分别是视口宽度和高度的百分比。接着，我们分析了几种常用的隐藏容器方法，包括display: none;、opacity: 0;、width: 0; height: 0;、visibility: hidden;、clip-path: polygon(0 0, 0 0, 0 0, 0 0);等，每种方法的特点和适用场景都有所涵盖。最后，通过简单的示例代码展示了如何在实际项目中应用这些长度单位和隐藏容器方法，以便读者能够更好地理解和运用这些概念。
