【web前端之超高频面试题整理】CSS篇

简介：

在前端开发面试中，CSS知识的掌握是基础且关键的一部分。从基础的盒模型和选择器优先级，到复杂的布局与动画，面试官常常通过多角度考察候选人对CSS的理解和应用能力。

🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥

---

1. ⭐CSS盒模型⭐

• 问题: 解释CSS盒模型以及它的组成部分。
• 解答: 盒模型包括四个部分：content (内容)、padding (内边距)、border (边框) 和 margin (外边距)。标准盒模型中，width 和 height 指的是 content 的大小，但在 box-sizing: border-box 模型中，width 和 height 包含了 padding 和 border。

2. ⭐CSS选择器的优先级⭐

• 问题: 如何确定CSS选择器的优先级？
• 解答: 优先级从高到低为：
  1. !important；
  2. 内联样式（如：style=""）；
  3. ID选择器；
  4. 类、伪类、属性选择器；
  5. 元素选择器、伪元素；
  6. 继承和浏览器默认样式。 计算方式：ID计1，类、伪类计10，元素、伪元素计100。

3. ⭐ Flexbox布局⭐

• 问题: 解释Flexbox的主轴（Main Axis）和交叉轴（Cross Axis）。如何在Flexbox中对齐元素？
• 解答: 在Flexbox布局中，flex-direction 定义了主轴的方向，默认为 row（从左到右）。交叉轴则与主轴垂直。常用的对齐属性包括：
  • justify-content: 沿主轴对齐；
  • align-items: 沿交叉轴对齐；
  • align-self: 允许单个项目沿交叉轴单独对齐。

4. ⭐CSS Grid布局⭐

• 问题: 解释CSS Grid与Flexbox的区别。
• 解答: Flexbox 是一维布局系统，主要处理单一方向的对齐（横向或纵向），而CSS Grid是二维布局系统，可以同时处理行和列。Grid适用于复杂的页面布局，而Flexbox更适合用于组件内部的对齐。

5. ⭐BFC (Block Formatting Context)⭐

• 问题: 什么是BFC？它的应用场景是什么？
• 解答: BFC是CSS中的一个渲染模式，可以创建独立的布局环境。触发BFC的方式包括：float 非 none、overflow 非 visible、display: inline-block 等。BFC的应用场景包括：
  • 清除浮动（不需要额外清除元素）；
  • 防止父元素因子元素的浮动而高度塌陷；
  • 控制相邻块元素的边距重叠。

6. ⭐垂直居中的方法⭐

• 问题: 有哪些方法可以实现元素的垂直居中？
• 解答: 实现垂直居中的常见方法：

// 使用 flex弹性布局：
display: flex; justify-content: center; align-items: center;
// 使用 position + transform：
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
// 使用 grid布局：
display: grid; place-items: center;

7. ⭐CSS动画⭐

• 问题: 如何使用CSS创建动画？animation 和 transition 有什么区别？
• 解答: transition 是对元素状态改变的过渡动画，只能从一个状态到另一个状态。而 animation 可以定义关键帧，实现更复杂的多阶段动画效果。例如：

@keyframes example { from { transform: translateX(0); } to { transform: translateX(100px); } } .animated-element { animation: example 2s infinite; }

8. ⭐媒体查询⭐

• 问题: 媒体查询的作用是什么？如何使用它们实现响应式设计？
• 解答: 媒体查询用于根据不同的设备特性（如屏幕宽度、高度、分辨率等）应用不同的CSS样式。常见的媒体查询例子：

  @media (max-width: 600px) { body { background-color: lightblue; } }

9. ⭐CSS预处理器⭐

• 问题: SASS、LESS的优势是什么？常用的功能有哪些？
• 解答: CSS预处理器如SASS和LESS引入了变量、嵌套、混合、继承等功能，极大提高了CSS的可维护性和可扩展性。例如，SASS的变量定义：

  $primary-color: #333; body { color: $primary-color; }

10. ⭐z-index 和堆叠上下文⭐

• 问题: 如何理解z-index的工作机制？堆叠上下文是什么？
• 解答: z-index 定义元素在Z轴上的堆叠顺序。较大的 z-index 值的元素会叠在较小的值之上。堆叠上下文由某些属性创建，如 position: relative、position: absolute、position: fixed、opacity 小于1等，堆叠上下文内的元素与外部的元素不会相互影响。

11. ⭐CSS中的伪类与伪元素⭐

• 问题: 解释伪类（pseudo-class）和伪元素（pseudo-element）的区别，并给出例子。
• 解答: 伪类用于选择处于特定状态的元素，如 :hover、:focus。伪元素用于选择文档中特定部分的元素，如 ::before、::after。例如：

  a:hover { color: red; } p::before { content: 'Prefix'; }

12. ⭐清除浮动⭐

• 问题: 你如何清除浮动元素对父容器的影响？
• 解答: 清除浮动常用以下方法：
  1. 使用 clearfix：

     .clearfix::after { content: ''; display: block; clear: both; }

  2. 使用 overflow: hidden 或者 auto 的父元素。

13. ⭐ CSS性能优化⭐

• 问题: 如何优化CSS性能？
• 解答: 常见的优化方法：
  1. 减少不必要的嵌套和过于复杂的选择器；
  2. 合理使用CSS预处理器（如SASS）减少重复代码；
  3. 使用CSS压缩工具压缩文件；
  4. 避免使用低效的选择器（如通配符 *）；
  5. 减少重排和重绘（通过合适的动画和布局方式）。

14. ⭐CSS单位⭐

• 问题: 说说em、rem、vw、vh、px的区别？？
• 解答:

        css3之前 px，em，%用的多。

        css3创建了新的单位 rem，vw，vh，为了在不同的场景下做更好的适配

区别 :

• 绝对单位：px（基于屏幕分辨率的基本单位）

• 相对单位：

  1. em：相对于当前元素的字体大小，会随着父元素变化而变化。

  2. rem: 相对于根元素（html 元素）的字体大小。

  3. vw：视口宽度的百分比。100vw表示整个视口宽度。

  4. vh：视口高度的百分比。1vh表示视口高度的1%。

---

结语

🔥如果文章对你有帮助的话，欢迎💗关注、👍点赞、⭐收藏、✍️评论，支持一下小老弟，蟹蟹大咖们~