序
大家好，我是sAnL1ng，一名2025届学生。最近，在准备前端开发面试过程中，我深入研究并总结了一系列面试里被问到的CSS问题，为了巩固和分享这些知识点，下面我会分为4篇文章详细为大家剖析所有面试中可能会被问到的CSS问题，让大家在基础分上手到擒来。
一、 请你说说你对css盒模型的理解
一般面试官叫我说说或者谈谈对css盒模型的理解，我们的回答公式为：XX是什么？然后开始讲解标准盒模型和怪异盒模型以及它们的区别。
(1) 什么是CSS盒模型？
在网页布局中，CSS盒模型是一个关键概念。它描述了浏览器如何渲染元素，并将每个元素看作是一个矩形的盒子，该盒子包含以下四个主要部分：
- Content（内容）： 元素实际包含的信息，例如文本、图片等。
- Padding（内边距）： 围绕在内容外部的空白区域，提供元素内容与边框之间的距离。
- Border（边框）： 位于内边距外部的边框线，定义元素的边界。
- Margin（外边距）： 位于边框外部的空白区域，定义元素与其他元素之间的距离。
(2) 标准盒模型 vs 怪异(IE)盒模型
标准盒模型和怪异（IE）盒模型在盒子总宽度的计算上有所不同。
标准盒模型： 盒子总宽度 = width + padding + border + margin
怪异(IE)盒模型： 盒子总宽度 = width + margin
理解盒模型的差异对于确保元素的正确布局至关重要。
二、css中的选择器有哪些？说说优先级
（1）CSS选择器及优先级的深入分析
- ID选择器： 通过元素的ID属性选择元素。
- 类名选择器： 通过元素的class属性选择元素。
- 标签选择器： 通过元素类型选择元素。
- 后代选择器： 选择嵌套在其他元素内的元素。
- 子选择器： 选择直接嵌套在父元素内的元素。
- 相邻兄弟选择器： 选择与指定元素同级的相邻元素。
- 群组选择器： 将多个选择器组合在一起，共同应用相同的样式。
优先级： CSS样式规则有不同的优先级，决定了哪些样式将被应用。优先级从高到低分别是：!important > 内联样式 > ID选择器 > 类名选择器 > 标签选择器。
三、说说css中的单位有哪些？
在css中的单位有很多，但是我们不需要全部列举，只需要聊聊以下单位就足够了。
- px（像素）： 基本的屏幕上的发光点，通常在网页设计中使用。
- rem： 相对单位，相对于根元素的字体大小。它保持相对一致的大小，不受嵌套影响。
- em： 相对单位，通常用于字体大小。它相对于父元素的字体大小，可用于实现相对大小的布局。
- vw/vh： 相对单位，相对于视口宽度/高度的百分比。这对于创建响应式设计非常有用。
- %： 相对单位，相对于父元素的大小。用于实现相对布局，特别是在响应式设计中。
四、说说设备像素，css像素，设备独立像素，dpr,ppi之间的区别？
- 设备像素（Device Pixel）： 物理屏幕上的实际像素点，它们构成显示屏的基本单位。
- CSS像素： CSS中的1px，通常与设备像素相等，但在高DPI屏幕上可能不同。
- 设备独立像素（Device-Independent Pixels）： 逻辑像素单位，使得设计在不同屏幕密度上保持一致，提高了移动设备的可伸缩性。
- DPR（设备像素比）： 设备像素与设备独立像素的比值，表示屏幕的像素密度。高DPR值通常意味着高分辨率屏幕。
- PPI（每英寸像素数）： 每英寸的物理像素密度，影响屏幕显示的清晰度。
总结
md
# 1.请你说说你对css盒模型的理解
(1) 是什么？
浏览器在页面布局时，将所有的元素表示为一个个矩形盒子，每一个盒子包含四个部分：
content,padding,border,margin
(2) 标准盒模型
盒子总宽度 = width + padding + border + margin
(3) 怪异(IE)盒模型
盒子总宽度 = width + margin
# 2. css中的选择器有哪些？说说优先级
1. id选择器
2. 类名选择器
3. 标签选择器
4. 后代选择器
5. 子选择器
6. 相邻兄弟选择器
7. 群组选择器
8. 属性选择器
9. 伪元素选择器
10. 伪类选择器
!important > 内联 > id选择器 > 类名选择器 > 标签选择器
` !important: 将优先级提升到最高 `
# 3. 说说css中的单位有哪些？
1. px : 像素单位，屏幕上的发光点
2. rem : 相对单位，相对于根子体大小
3. em ：相对单位，用于字体上会继承父容器的字体大小，用在它处，是相对于当前容器自己的字体大小来定的
4. vw/vh : 相对单位，相对于窗口宽高比
5. % : 相对单位，相对于父容器的大小
# 4. 说说设备像素，css像素，设备独立像素，dpr,ppi之间的区别？
1. pc端 1px == 1个物理像素
2. 页面缩放比为1：1时， 1px == 1个物理像素
设备像素 === 物理像素
css像素 === 1px
设备独立像素 === 分辨率
dpr(设备的像素比) === 设备像素 / 设备独立像素
ppi === 像素的密度如果你对春招感兴趣，可以加博主的个人微信：
SanL1ng，我和我的小伙伴们有个面试群，可以进群讨论大家面试过程中遇到的问题，我们一起解决。
所有文章的相关代码: GitHub仓库
更多内容：手写Ref 为何说Ref才是最强？