likes
comments
collection
share

解析CSS面试考点：盒模型、选择器、单位和像素概念，一网打尽！

作者站长头像
站长
· 阅读数 8

前言

最近本人在准备面试中与CSS相关的内容，为自己后面的面试及复习知识做准备。对于知识而言，有着一个记录也是十分重要的，也方便自己对自己所了解的技能做总结。大家都知道，在前端面试中CSS也是一个面试的重要考点，下面是本人整理的部分CSS面试考点。

题目一：请你说说你对css盒模型的理解

这个问题是面试中CSS极其重要的考点，几乎经常被问到。对于CSS 盒模型来说，它前端开发中非常基础而重要的概念之一。它描述了网页上的每个元素都是一个矩形的盒子，这个盒子由元素的内容(content)、内边距(padding)、边框(border)和外边距(margin)组成。

具体的讲，CSS 盒模型包含以下几个部分：

  1. 内容区域（Content） ：指元素内部实际包含内容的区域，例如文字、图片等。
  2. 内边距（Padding） ：内容区域与边框之间的空白区域，用来控制内容与边框的距离。
  3. 边框（Border） ：内边距外部的边框，用来围绕内容和内边距的区域。
  4. 外边距（Margin） ：边框外部的空白区域，用来控制元素与其他元素之间的距离。

盒模型的分类：

在 CSS 中，有两种盒模型：标准盒模型（content-box）和 IE 盒模型（border-box）。

标准盒模型（content-box） 在标准盒模型中，元素的宽度和高度仅包括内容区域的尺寸，不包括内边距（padding）、边框（border）和外边距（margin）。这意味着，当你设置一个元素的宽度为 200px 时，这个宽度值仅包括元素的内容区域，而不包括内边距、边框和外边距的宽度。如下面的示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 300px;
      height: 300px;
      padding: 10px;
      margin: 20px;
      border: 5px solid blue;
      /* box-sizing: border-box; 要求浏览器以IE盒子模型来加载盒子 */
      box-sizing: content-box;
      /*要求浏览器以标准盒子模型来加载盒子*/
    }
  </style>
</head>

<body>
  <div class="box">盒子模型</div>
</body>

</html>

解析CSS面试考点：盒模型、选择器、单位和像素概念，一网打尽！

从这个示例中，我们可以看出在标准盒模型中，元素的总宽度计算方式为：内容宽度（width） + 左右内边距（padding-left + padding-right） + 左右边框宽度（border-left-width + border-right-width） + 左右外边距（margin-left + margin-right）。这个总宽度值就是元素所占据的实际空间。也就是说盒子总宽度：width + padding + border + margin = 330

怪异盒模型（IE盒模型） 在 IE 盒模型中，元素的宽度和高度包括了内容区域、内边距和边框的尺寸，但不包括外边距。换句话说，当你设置一个元素的宽度为 300px 时，这个宽度值包括了内容区域、内边距和边框的宽度。还是上面的那个例子，但是我们需要在style中加上box-sizing: border-box要求浏览器以IE盒子模型来加载盒子。

解析CSS面试考点：盒模型、选择器、单位和像素概念，一网打尽！

上面的图我们可以从中看出，在 IE 盒模型中，元素的总宽度计算方式为：内容宽度（width）（包括内边距和边框） + 左右外边距（margin-left + margin-right）。这个总宽度值同样是元素所占据的实际空间。也就是是说，盒子总宽度：width + margin，盒子总高度：height + margin。

总的来说，标准盒模型和 IE 盒模型的主要区别在于它们计算元素宽度和高度的方式不同。

题目二：css中的选择器有哪些？说说优先级？

CSS选择器是CSS规则的第一部分，它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式，选择器所选择的元素，叫做“选择器的对象”。

选择器的分类： 在css中，选择器共有如下几种,这些选择器可以单独使用，也可以组合使用。

  1. ID 选择器：使用元素的 ID 属性进行选择，以 # 开头。例如，#header { color: red; } 会选择所有具有 id="header" 的元素。
  2. 类选择器：使用元素的类名进行选择，以 . 开头。例如，.btn { background-color: blue; } 会选择所有具有 class="btn" 的元素。
  3. 标签选择器：根据元素的标签名称进行选择。例如，div { font-size: 16px; } 会选择所有 <div> 元素。
  4. 后代选择器：选择指定元素内的后代元素。例如，div p { color: green; } 会选择所有 <div> 元素内部的 <p> 元素。
  5. 子元素选择器：选择指定元素的直接子元素。例如，ul > li { list-style-type: none; } 会选择所有 <ul> 下的直接子元素 <li>。
  6. 相邻兄弟选择器：选择指定元素之后紧跟的相邻兄弟元素。例如，h2 + p { font-weight: bold; } 会选择所有 <h2> 元素后面紧跟的 <p> 元素。
  7. 群组选择器：将多个选择器组合在一起，以逗号分隔，同时选择它们匹配的元素。例如，h1, h2, h3 { color: blue; } 会选择所有 <h1>、<h2> 和 <h3> 元素，并将它们的颜色设为蓝色。
  8. 属性选择器：根据元素的属性进行选择。例如，input[type="text"] { width: 200px; } 会选择所有 type 属性为 "text" 的 <input> 元素。
  9. 伪类选择器：根据元素的特定状态选择元素，例如鼠标悬停、访问状态等。例如，a:hover { text-decoration: underline; } 会选择鼠标悬停在 <a> 元素上时应用下划线样式。
  10. 伪元素选择器：向元素的特定部分添加样式，例如元素的前面或后面添加内容。例如，p::first-line { font-weight: bold; } 会将 <p> 元素的第一行文本加粗。

优先级： 相信大家对CSS选择器的优先级都不陌生：内联选择器 > ID选择器 > 类选择器 > 标签选择器。

到具体的计算层⾯，优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：

  • 如果存在内联样式，那么 A = 1, 否则 A = 0
  • B的值等于 ID选择器出现的次数
  • C的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数
  • D 的值等于 标签选择器 和 伪元素 出现的总次数

题目三：请你说说css中的单位有哪些？

相信大家都知道，在css中单位的使用是十分重要的，因此无论是从适配性还是观赏性方面来讲，了解css的单位对于我们来说也是很有必要的。下面我来为大家介绍一下css中的单位有哪些：

在 CSS 中，常见的单位包括：

  1. 像素（px）：相对长度单位，代表屏幕上的一个像素点。像素在网页设计中应用非常广泛，它的值是固定的，不受屏幕分辨率影响。

    div {
    width: 200px;
    height: 100px;
}

  2. 百分比（%）：相对长度单位，相对于父元素的百分比。例如，width: 50%; 表示元素的宽度为父元素宽度的一半。

    div {
    width: 50%;
}

  3. EMS（em）：相对长度单位，相对于元素的字体大小。例如，如果元素的字体大小为 16px，font-size: 1.5em; 将会使元素的字体大小为 24px（1.5 倍的 16px）。

    div {
    font-size: 1.5em;
}

  4. REM（rem）：相对长度单位，相对于根元素（<html>）的字体大小。与 em 不同的是，rem 单位始终是相对于根元素的字体大小，这样可以更方便地控制整个页面的比例关系。

    div {
    font-size: 1.5rem;
}

  5. Viewport 百分比单位（vw、vh、vmin、vmax）：相对长度单位，相对于视口大小的百分比。

    • vw（视口宽度）：1vw 等于视口宽度的 1%。
    • vh（视口高度）：1vh 等于视口高度的 1%。
    • vmin（视口宽度和高度中较小的那个）：1vmin 等于视口宽度和高度中较小值的 1%。
    • vmax（视口宽度和高度中较大的那个）：1vmax 等于视口宽度和高度中较大值的 1%。
    div {
    width: 50vw;
    height: 50vh;
}

  6. 像素密度单位（dpi、dpcm、dppx） ：用于描述输出设备的像素密度。

  • dpi（每英寸像素数）：1dpi 表示每英寸有 1 个像素。
  • dpcm（每厘米像素数）：1dpcm 表示每厘米有 1 个像素。
  • dppx（每像素点数）：1dppx 表示每像素点数为 1。
@media print and (min-resolution: 300dpi) {
    /* 在打印时，当分辨率大于 300dpi 时应用的样式 */
}

这些单位可以根据具体的需求选择使用，能够灵活控制元素在不同设备上的大小和比例。

题目四：说说设备像素，css像素，设备独立像素，dpr，ppi的区别？

当谈论设备像素、CSS 像素、设备独立像素（DIP）、设备像素比（DPR）和像素每英寸（PPI）时，通常是在讨论屏幕分辨率、响应式设计和图像质量等相关概念。下面我来分别解释它们的含义和区别：

  1. 设备像素（Device Pixel） ：也称物理像素，是显示设备（如手机屏幕、电脑显示器）实际的物理像素点。它们是构成屏幕图像的最小单位。通常以屏幕的分辨率来描述，比如 1920x1080 表示宽度为 1920 个像素、高度为 1080 个像素。
  2. CSS 像素（CSS Pixel） ：是网页中使用的像素单位，通常在 CSS 中使用。它是一个抽象的单位，与设备无关，用于定义网页上的元素大小、间距等。在大多数情况下，1 个 CSS 像素对应于 1 个设备像素，但在高分辨率屏幕（如 Retina 屏幕）上，1 个 CSS 像素可能对应多个设备像素。
  3. 设备独立像素（Device Independent Pixel，DIP） ：也称密度无关像素（Density Independent Pixel，DP）。它是一种与设备无关的逻辑像素单位，用于测量元素的尺寸和位置。在 Android 开发中，1 个 DIP 相当于屏幕上的 1 个物理像素，而在 iOS 开发中，1 个 DIP 可能对应于多个物理像素。
  4. 设备像素比（Device Pixel Ratio，DPR） ：是设备像素和 CSS 像素之间的比率。它表示了在同样的物理尺寸下，设备像素的数量与 CSS 像素的数量之间的关系。例如，DPR 为 2 表示每个 CSS 像素由 2 个设备像素组成。
  5. 像素每英寸（Pixels Per Inch，PPI） ：是用于描述显示器或打印机分辨率的单位，表示每英寸长度上的像素数量。PPI 越高，屏幕显示的图像就越清晰，因为像素更加密集。

下面我用iPhone SE手机的尺寸作为示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pixel Example</title>
    <style>
        .box {
            width: 100px; /* 使用 CSS 像素定义宽度 */
            height: 100px; /* 使用 CSS 像素定义高度 */
            background-color: red;
            margin: 10px; /* 使用 CSS 像素定义外边距 */
        }
    </style>
</head>
<body>
    <div class="box" id="box"></div>
    <script>
        // 获取元素
        var box = document.getElementById('box');
        // 获取设备像素比
        var dpr = window.devicePixelRatio || 1;
        // 输出设备像素比
        console.log('dpr:', dpr);
        // 输出设备分辨率
        console.log('设备分辨率:', screen.width, 'x', screen.height);
        // 输出 CSS 像素大小
        console.log('CSS px:', box.offsetWidth, 'x', box.offsetHeight);
    </script>
</body>
</html>

我们可以在浏览器的控制台看到以下的输出：

解析CSS面试考点：盒模型、选择器、单位和像素概念，一网打尽！

综上所述，设备像素是屏幕上实际的物理像素，CSS 像素是网页中使用的抽象单位，而设备独立像素是一个与设备无关的逻辑像素单位。DPR 表示设备像素和 CSS 像素之间的比率，而 PPI 则是描述屏幕或打印机分辨率的单位。在高分辨率屏幕上，DPR 可能会影响 CSS 像素与设备像素之间的关系，从而影响到页面的显示效果。

总的来说：

  1. PC端 1px = 1物理像素：在大多数情况下，PC 端的浏览器会将 CSS 像素（1px）直接映射到屏幕的物理像素，即 1px 对应于 1 个物理像素。
  2. 页面缩放比为1:1时，1px = 1物理像素：当页面的缩放比例为 1:1 时，CSS 像素与物理像素的对应关系是一一对应的，即 1px 对应于 1 个物理像素。
  3. 设备像素 == 物理像素：在大多数情况下，设备像素和物理像素是同一个概念，都指的是屏幕上的实际像素点。
  4. CSS像素==1px：在绝大多数情况下，1 个 CSS 像素等于 1px（像素单位），但在高分辨率屏幕上，1 个 CSS 像素可能会对应多个物理像素。
  5. 设备独立像素 ==分辨率：设备独立像素（Device Independent Pixels，DIP）是一个与设备无关的逻辑像素单位，它与屏幕的分辨率无关，而是表示屏幕上的一个虚拟像素。通常情况下，设备独立像素等于屏幕的分辨率。
  6. dpr(设备像素比) = 设备像素/设备独立像素：设备像素比（Device Pixel Ratio，DPR）是设备像素和设备独立像素之间的比率。它表示了在同样的物理尺寸下，设备像素的数量与设备独立像素的数量之间的关系。
  7. ppi(像素密度) = 设备像素/屏幕尺寸：像素密度（Pixels Per Inch，PPI）是用于描述屏幕分辨率的单位，表示每英寸长度上的像素数量。通常情况下，PPI 越高，屏幕显示的图像就越清晰，因为像素更加密集。

结语

以上就是本次笔者所整理的有关css面试的内容，后面本人还将继续完善css的面试考点。如有不足之处欢迎大家在评论区进行完善一下，大家一起为了进大厂而努力，一起加油吧！！！

假如您也和我一样，在准备春招。欢迎加微信shunwuyu，这里有几十位一心去大厂的友友可以相互鼓励，分享信息，模拟面试，共读源码，齐刷算法，手撕面经。来吧，友友们！