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

沐渃清澄2024-02-24 22:10

前言

最近本人在准备面试中与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 时，这个宽度值仅包括元素的内容区域，而不包括内边距、边框和外边距的宽度。如下面的示例：

html 复制代码 
<!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>

从这个示例中，我们可以看出在标准盒模型中，元素的总宽度计算方式为：内容宽度（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盒子模型来加载盒子。

上面的图我们可以从中看出，在 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）：相对长度单位，代表屏幕上的一个像素点。像素在网页设计中应用非常广泛，它的值是固定的，不受屏幕分辨率影响。

    css 复制代码 
    div {
    width: 200px;
    height: 100px;
}

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

    css 复制代码 
    div {
    width: 50%;
}

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

    css 复制代码 
    div {
    font-size: 1.5em;
}

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

    css 复制代码 
    div {
    font-size: 1.5rem;
}

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

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

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

  • dpi（每英寸像素数）：1dpi 表示每英寸有 1 个像素。
  • dpcm（每厘米像素数）：1dpcm 表示每厘米有 1 个像素。
  • dppx（每像素点数）：1dppx 表示每像素点数为 1。
css 复制代码 
@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手机的尺寸作为示例：

html 复制代码 
<!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 像素是网页中使用的抽象单位，而设备独立像素是一个与设备无关的逻辑像素单位。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，这里有几十位一心去大厂的友友可以相互鼓励，分享信息，模拟面试，共读源码，齐刷算法，手撕面经。来吧，友友们！

相关推荐
崔庆才丨静觅4 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60615 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了5 小时前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅5 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅6 小时前
5分钟快速搭建 AI 平台并用它赚钱！
前端
崔庆才丨静觅6 小时前
比官方便宜一半以上！Midjourney API 申请及使用
前端
Moment6 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅6 小时前
刷屏全网的“nano-banana”API接入指南！0.1元/张量产高清创意图，开发者必藏
前端
剪刀石头布啊6 小时前
jwt介绍
前端
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04UV安装并设置国内源05OpenClaw Chrome扩展使用教程 - 浏览器中继控制06Linux下V2Ray安装配置指南07Claude Code Skills 实用使用手册08Vue-skills的中文文档09让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南10一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示