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

前言

最近本人在准备面试中与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) :也称物理像素,是显示设备(如手机屏幕、电脑显示器)实际的物理像素点。它们是构成屏幕图像的最小单位。通常以屏幕的分辨率来描述,比如 1920×1080 表示宽度为 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,这里有几十位一心去大厂的友友可以相互鼓励,分享信息,模拟面试,共读源码,齐刷算法,手撕面经。来吧,友友们!

原文链接:https://juejin.cn/post/7338717224436793394 作者:沐渃清澄

(0)
上一篇 2024年2月25日 上午10:26
下一篇 2024年2月25日 上午10:36

相关推荐

发表回复

登录后才能评论