2024 高频前端面试题汇总之CSS篇(一)

8,881 阅读6分钟

前言

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

2024 高频前端面试题汇总之CSS篇(二)

2024 高频前端面试题汇总之js篇(一)

2024 高频前端面试题汇总之js篇(二)

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

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

image.png

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 === 像素的密度

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