面试中可能会遇到的css的问题（2）

moyu84
116 阅读6分钟

这里主要的有关css里的单位问题。

3.说说css中的常见单位有哪些？

在 CSS 中，常见的单位有：

  1. px：像素单位，表示屏幕上的发光点。它是绝对单位，不会随着页面布局的改变而改变大小。例如：font-size: 16px;
  2. rem：相对单位，相对于根元素的字体大小（即 <html> 元素的字体大小）。例如，如果根元素的字体大小是 16px，则 1rem 就等同于 16px。例如：font-size: 1.5rem;
  3. em：相对单位，通常用于字体大小。它相对于父元素的字体大小来计算自身的大小。例如，如果父元素的字体大小是 16px，1em 就等同于 16px。例如：font-size: 1.2em;
  4. vw/vh：视窗宽度（Viewport Width）和视窗高度（Viewport Height）的相对单位。1vw 等于视窗宽度的1%；1vh 等于视窗高度的1%。例如：width: 50vw;
  5. % ：百分比单位，相对于父元素的特定属性值。例如，width: 50%; 表示元素的宽度为父元素宽度的50%。

以下是一个简单的示例代码，演示如何使用这些单位：

html {
    font-size: 16px; /* 设置根元素字体大小为 16px */
}

.parent {
    font-size: 1.2em; /* 子元素字体大小为父元素字体大小的1.2倍 */
    width: 50%; /* 子元素宽度为父元素宽度的50% */
}

.child {
    font-size: 1rem; /* 子元素字体大小为根元素字体大小（16px） */
    width: 50vw; /* 子元素宽度为视窗宽度的50% */
}

那解决了这个问题那我们就要来谈谈接下来这个问题了。

4. 说说设备像素，css像素，设备独立像素，dpr，ppi之间的区别？

在理解设备像素、CSS 像素、设备独立像素、DPR 和 PPI 之间的区别时，我们可以从以下几个方面进行详细解释：

  1. 设备像素（Device Pixel）：也称为物理像素，是显示设备上的最小单位，用于显示图像。在 PC 端，通常 1 个 CSS 像素对应 1 个设备像素。
  2. CSS 像素：是 Web 开发中使用的抽象单位，用于定义页面元素的大小和布局。在页面缩放比为 1:1 时，1 个 CSS 像素通常等于 1 个设备像素。
  3. 设备独立像素（Device-Independent Pixel，也称为逻辑像素）：是一个抽象的单位，用于在不同设备上显示相同大小的内容。设备独立像素是 CSS 像素在设备上的等效单位，不同设备的设备独立像素可能不同。
  4. DPR（Device Pixel Ratio） ：是设备像素与设备独立像素之间的比率。DPR 表示一个 CSS 像素对应多少个设备像素。例如，DPR 为 2 表示每个 CSS 像素对应 2 个设备像素。
  5. PPI（Pixels Per Inch） ：是指每英寸的像素数量，用于衡量屏幕的像素密度。PPI 越高，屏幕显示的内容就越清晰。PPI 可以影响设备的显示效果和清晰度，但与设备像素、CSS 僠素和设备独立像素之间的关系并不直接相关。

综上所述，设备像素是物理像素，CSS 像素是 Web 开发中使用的抽象单位，设备独立像素是用于在不同设备上显示相同大小内容的逻辑像素，DPR 表示设备像素与设备独立像素之间的比率，而 PPI 则是用于衡量屏幕像素密度的指标。这些概念之间相互关联，但又各自有着不同的作用和定义。

5. css中有哪些方式可以隐藏页面元素？区别是什么？

面试官要是问到了这个问题，前面那个问题我们多多少少都能答出来，我们主要要看看怎么回答后面这个问题。那我们就要从是否占据文档流，有无响应事件，是否回流重绘这几个问题进行回答。

我们先回答前面那个问题：

  1. display: none; ：将元素的 display 属性设置为 none，可以完全隐藏元素，使其不显示在页面上，也不占据空间。
.element {
    display: none;
}
  1. visibility: hidden; ：将元素的 visibility 属性设置为 hidden，元素会隐藏，但仍然占据空间。
.element {
    visibility: hidden;
}
  1. opacity: 0; ：将元素的 opacity 属性设置为 0，元素会变为完全透明，但仍然占据空间。
.element {
    opacity: 0;
}
  1. position: absolute; ：将元素的 position 属性设置为 absolute，并通过设置 top、left、right、bottom 来将元素移出可视区域，从而隐藏元素。
.element {
    position: absolute;
    top: -9999px;
    left: -9999px;
}
  1. clip-path: polygon(0 0, 0 0, 0 0, 0 0); ：使用 clip-path 属性裁剪元素的可见部分，将元素裁剪为不可见。
.element {
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
}

常见的我们就知道这几个，能聊到这些个就差不多了，接下来我们就从说的那几个方面来讲讲他们的区别，我们要先知道脱离文档六和回流重绘的知识点，脱离文档流是指元素不再按照正常文档流布局；回流是页面重新布局的过程，重绘是重新绘制元素外观；元素是否响应事件取决于其可见性和是否被禁用。接下来就开始聊他们的区别了：

  1. display: none：该属性会使元素脱离文档流，不会占据空间，也不会响应事件。当一个元素的 display 被设置为 none 时，该元素会从文档流中移除，导致回流和重绘。
  2. visibility: hidden：元素仍然占据文档流，但是不可见，不会响应事件。元素的 visibility 被设置为 hidden 时，元素仍然占据空间，但对用户不可见，只会触发重绘而不会触发回流。
  3. opacity: 0：元素仍然占据文档流，但是透明，可以响应事件。当元素的 opacity 被设置为 0 时，元素仍然占据空间，但变为透明，仍然可以响应事件。这可能会触发重绘，但不一定会触发回流。
  4. position: absolute：该属性会使元素脱离文档流，不会占据空间，也不会响应事件。使用绝对定位的元素会脱离文档流，不占据空间，也不会响应事件，可能会导致回流和重绘。
  5. clip-path: circle(0%) ：元素仍然占据文档流，不可见，无法响应事件。使用 clip-path 属性可以裁剪元素的可见部分，当使用 circle(0%) 时，元素会被裁剪为不可见，但仍然占据空间，无法响应事件，可能会触发重绘。

以上就是本篇文章的全部内容，还有css中会在后面的文章中进行解答。

avatar
文章
阅读
粉丝