20道高频CSS面试题快问快答(1)

BFC是一个Web页面的渲染区域，并且它具有一些规则，决定了其子元素如何布局，以及与其他元素之间的关系和相互作用。要创建BFC。

可以使用以下方法：

• 为根元素设置overflow: auto；
• 将display设置为table；
• 将display设置为flex或grid；
• 将元素的width设置为一个百分比值；
• 为元素设置column-count或column-width属性。

6. CSS中的动画和过渡的区别是什么？

CSS中的动画和过渡都可以创建动态效果，但它们之间存在区别。

过渡是状态之间的平滑变化，它可以在一定的时间范围内应用一种新的样式变化，并产生动画效果。而动画则可以创建更复杂的变化和效果，可以在关键帧之间进行插值，并使用时间函数来控制变化的速度。

7. 什么是CSS中的预处理器和后处理器？它们的作用是什么？

CSS预处理器是一种编程语言，可以扩展CSS的功能，例如变量、嵌套规则、混合等，常见的CSS预处理器有Sass、Less等。

它们的作用是简化CSS编写和组织样式表。CSS后处理器是一种将CSS代码转换成更高级别的抽象语法树（AST），以便进行进一步分析和处理的工具，例如PostCSS、Stylelint等。它们的作用是自动化处理CSS代码，例如自动添加浏览器前缀、代码压缩等。

8. 什么是CSS中的跨浏览器兼容性？如何实现跨浏览器兼容性？

CSS中的跨浏览器兼容性是指确保网页在各种不同的浏览器和设备上能够正确显示和运行的能力。

为了实现跨浏览器兼容性，可以使用一些技巧和工具，例如使用重置CSS样式表、使用浏览器前缀、进行跨浏览器测试等。

9. CSS中的重置CSS样式表的作用是什么？如何创建重置CSS样式表？

重置CSS样式表的作用是消除浏览器默认样式的差异，使得不同浏览器的显示效果更加一致。

要创建重置CSS样式表，可以使用以下方法：使用现有的重置样式表；手动创建重置样式表；使用normalize.css或Reset.css等现有的重置工具。

10. 什么是CSS中的模块化？有哪些模块化方案？

CSS中的模块化是指将CSS代码划分为多个独立的文件或模块，以便更好地组织和管理样式表。模块化可以提高代码的可维护性和复用性。

常见的模块化方案包括：

• BEM（块、元素、修饰符方法）
• SMACSS（面向场景的模块化架构和分类系统）
• Atomic CSS（原子类）等。

11. 如何实现一个三角形？

可以利用 CSS 的 border 属性来实现三角形。

例如，一个向下的三角形可以这样写：

.triangle {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #000;
}

12. 如何实现一个圆形？

可以利用 CSS 的 border-radius 属性来实现圆形。

例如，一个半径为 50px 的圆形可以这样写：

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

13. 如何实现一个渐变背景？

可以利用 CSS 的 linear-gradient 或 radial-gradient 属性来实现渐变背景。

例如，一个从上到下的渐变背景可以这样写：

.gradient {
  background: linear-gradient(to bottom, #000, #fff);
}

14. 如何实现一个水平垂直居中的元素？

可以利用 CSS 的 position 和 transform 属性来实现水平垂直居中。

例如，一个宽高为 100px 的元素可以这样写：

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
}

15. 如何实现一个响应式布局？

可以利用 CSS 的媒体查询和弹性布局来实现响应式布局。

例如，一个在不同屏幕尺寸下显示不同布局的页面可以这样写：

@media screen and (max-width: 768px) {
  .container {
    display: flex;
    flex-direction: column;
  }
}

@media screen and (min-width: 768px) {
  .container {
    display: flex;
    flex-direction: row;
  }
}

16. 如何实现一个固定在页面底部的元素？

可以利用 CSS 的 position 和 bottom 属性来实现固定在页面底部的元素。

例如，一个固定在页面底部的按钮可以这样写：

.button {
  position: fixed;
  bottom: 0;
  width: 100%;
}

17. 如何实现一个悬浮在页面右下角的元素？

可以利用 CSS 的 position 和 right、bottom 属性来实现悬浮在页面右下角的元素。

例如，一个悬浮在页面右下角的提示框可以这样写：

.tooltip {
  position: fixed;
  right: 10px;
  bottom: 10px;
}

18. 如何实现一个自适应宽度的元素？

可以利用 CSS 的 width 和 max-width 属性来实现自适应宽度的元素。

例如，一个最大宽度为 500px 的自适应宽度的元素可以这样写：

.adaptive {
  max-width: 500px;
  width: 100%;
}

总结

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！