2024 高频前端面试题汇总之CSS篇（一）

前言

📢最近准备春招啦了，所以整理了一些前端高频大厂面试题，分享给大家，如有问题欢迎留言指正，面试专栏我会长期更新，欢迎大家点赞🤞、收藏📌，关注➕，感谢！

1. 说说你对css盒模型的理解

CSS盒模型是指在网页布局中，每个元素可以看作一个矩形的盒子，这个盒子包含了内容、内边距、边框和外边距。盒模型的组成部分包括：

1. 内容区域（content area）：显示元素的实际内容，比如文本、图片等。
2. 内边距（padding）：内容区域与边框之间的空白区域，可以通过padding属性进行设置。
3. 边框（border）：内边距和外边距之间的边界，可以通过border属性进行设置。
4. 外边距（margin）：边框与相邻元素之间的空白区域，可以通过margin属性进行设置。

在标准的盒模型中，一个元素的宽度和高度由内容区域、内边距、边框和外边距的宽度之和决定。然而，在某些情况下，可以通过CSS的box-sizing属性来改变盒模型的行为，例如使用box-sizing: border-box可以让元素的宽度和高度包括内边距和边框的宽度。

怪异盒模型(IE) 盒子总宽度: width + margin

理解盒模型对于控制和布局网页元素至关重要，它影响了元素在页面中的尺寸、位置和相互之间的关系。

2. css中的选择器有哪些？说说优先级

在CSS中，选择器是用来选择需要应用样式的HTML元素的模式。常见的CSS选择器包括：

1. 元素选择器（Element Selector）：选择指定元素类型的所有元素，例如p选择所有段落元素。
2. 类选择器（Class Selector）：选择具有指定类名的元素，使用"."符号表示，例如.class选择所有具有class为"class"的元素。
3. ID选择器（ID Selector）：选择具有指定id的唯一元素，使用"#"符号表示，例如#myId选择id为"myId"的元素。
4. 属性选择器（Attribute Selector）：选择具有指定属性或属性值的元素，例如[type="text"]选择所有type属性值为"text"的元素。
5. 后代选择器（Descendant Selector）：选择指定元素的后代元素，使用空格分隔，例如div p选择所有div元素内部的p元素。
6. 直接子元素选择器（Child Selector）：选择指定元素的直接子元素，使用">"符号表示，例如div > p选择所有div元素的直接子元素p。
7. 伪类选择器（Pseudo-class Selector）：选择具有特定状态或行为的元素，例如:hover选择鼠标悬停的元素。
8. 伪元素选择器（Pseudo-element Selector）：选择元素的特定部分，例如::before选择元素的前面插入内容。

优先级是指当多个选择器同时应用于一个元素时，决定哪个选择器的样式将被应用。CSS优先级从高到低依次为：

1. !important：使用!important声明的样式具有最高优先级。
2. 内联样式（Inline Styles）：直接写在HTML元素的style属性中的样式。
3. ID选择器（ID Selectors）：具有id选择器的样式。
4. 类选择器、属性选择器和伪类选择器（Class Selectors, Attribute Selectors, and Pseudo-class Selectors）：具有类选择器、属性选择器和伪类选择器的样式。
5. 元素选择器和伪元素选择器（Element Selectors and Pseudo-element Selectors）：具有元素选择器和伪元素选择器的样式。
6. 通配选择器（Universal Selector）和子选择器（Child Selectors）：具有通配选择器和子选择器的样式。

!important > 内联 > id选择器 > 类名选择器 > 标签选择器

当多个选择器具有相同优先级时，后面的样式会覆盖前面的样式。如果两个选择器具有相同优先级且都使用了!important，则根据CSS规则，以代码中出现的顺序为准。

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

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

1. 像素（px）：最常用的单位，相对于显示器屏幕的一个像素。
2. 百分比（%）：相对于父元素的百分比。
3. em：相对于当前元素的字体大小。
4. rem：相对于根元素（html 元素）的字体大小。
5. vw：视口宽度的百分比，1vw 等于视口宽度的 1%。
6. vh：视口高度的百分比，1vh 等于视口高度的 1%。

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

设备像素（Device Pixel）：设备像素是物理屏幕上的一个点，是显示器或移动设备屏幕的最小单位。设备像素的数量决定了屏幕的分辨率。

CSS像素（CSS Pixel）：CSS 像素是 Web 开发中使用的抽象单位，它与设备像素之间存在一定的关系，但并不直接映射到具体的物理像素上。浏览器会根据设备像素比（Device Pixel Ratio，简称 DPR）将 CSS 像素转换为实际的设备像素。

设备独立像素（Device-Independent Pixel，也称为密度无关像素）：设备独立像素是一个抽象的单位，用来在不同设备上保持一致的显示效果。在 CSS 中，1 个设备独立像素通常等于 1 个 CSS 像素。设备独立像素的概念有助于实现响应式设计和跨设备兼容性。

设备像素比（Device Pixel Ratio，DPR）：设备像素比是指设备像素与设备独立像素的比值，表示一个 CSS 像素对应的设备像素数目。例如，如果一个设备的 DPR 为 2，那么 1 个 CSS 像素将对应 4 个设备像素（2x2）。

像素密度（Pixels Per Inch，PPI）：像素密度是指每英寸（inch）的屏幕上的像素数量，通常用于描述屏幕的清晰度和显示质量。PPI 越高，屏幕显示的细节就越丰富。

1. pc端 1px == 1个物理像素
2. 页面缩放比为1:1=时， 1px == 1个物理像素

设备像素 === 物理像素 css像素 === 1px 设备独立像素 === 分辨率 dpr(设备像素比) === 设备像素 / 设备独立像素 ppi === 像素的密度

如觉得本文对你有帮助的话，欢迎点赞❤❤❤，写作不易，持续输出的背后是无数个日夜的积累，您的点赞是持续写作的动力，感谢支持！