css3.31面试题

CSS 相关的面试题一般围绕基础知识、布局、性能优化、兼容性、深入原理等几个方向。以下是一些常见的面试题总结:

  1. CSS 基础知识

盒模型(Box Model)是什么?有哪些类型?

px、em、rem、vw、vh、% 的区别?

CSS 选择器的优先级规则是什么?如何提高/降低权重?

伪类(:hover、:nth-child())和伪元素(::before、::after)的区别?

visibility: hidden、display: none 和 opacity: 0 的区别?

  1. CSS 布局相关

Flex 布局有哪些常见属性?如何实现垂直水平居中?

Grid 布局的核心概念?与 Flex 的区别?

如何实现两栏、三栏布局?(圣杯布局、双飞翼布局)

position: relative、absolute、fixed 和 sticky 的区别?

BFC(Block Formatting Context,块级格式化上下文)是什么?作用是什么?

  1. CSS 动画与过渡

如何使用 CSS 实现动画效果?(transition 和 animation 的区别)

will-change 有什么作用?使用时有哪些注意事项?

如何优化 CSS 动画的性能?

  1. CSS 性能优化

如何减少 CSS 选择器的性能消耗?

为什么不建议使用 @import 引入 CSS?

如何利用 contain 提高渲染性能?

哪些 CSS 属性会触发回流(Reflow)和重绘(Repaint)?如何优化?

GPU 加速 是什么?如何开启?(transform: translateZ(0))

  1. CSS 兼容性 & 实践

CSS 如何实现 1px 像素的效果?

不同浏览器的 CSS 兼容性问题如何解决?(如 flex 在 Safari 的 min-height 处理)

如何实现响应式设计?(媒体查询、rem、vw/vh)

如何使用 CSS 预处理器(SASS/LESS)提升开发效率?

如何使用 CSS 变量(var())提高样式的可维护性?

  1. CSS 深入原理

为什么 margin 会发生塌陷?如何解决?

为什么 z-index 失效?如何解决?

CSS 如何实现字体抗锯齿优化?(font-smooth、-webkit-font-smoothing)

层叠上下文(Stacking Context)是如何形成的?如何影响 z-index?

如何自定义滚动条样式?(::-webkit-scrollbar)

这些题目涉及 CSS 的多个方面,适用于不同级别的前端开发者。你在面试时可以根据实际情况准备相应的回答和实践案例。

如果你想针对某些方向深入讲解或提供示例代码,我可以进一步补充。

相关推荐
AI焦点4 分钟前
跨越协议鸿沟:Tool Use状态机从Anthropic到OpenAI兼容体系的适配要点
前端·人工智能
Dxy12393102167 分钟前
Python线程锁:为什么多线程会“打架“,以及怎么解决
开发语言·前端·python
海兰38 分钟前
【web应用】Excel 项目数据自动化分析系统(AI 驱动分析)详细设计与部署指南(附源代码)
前端·人工智能·自动化·excel
2501_9400417441 分钟前
技术分享:高质量全栈开发提示词设计实践 —— 覆盖简单到复杂
前端·prompt
IT_陈寒1 小时前
Python的os.path.join居然能这么坑?
前端·人工智能·后端
艳阳天_.1 小时前
星瀚弹框页面实现
java·前端·python
EdgeOne边缘安全加速平台2 小时前
EdgeOne Web 防护×AI 升级:让 AI 既参与攻击识别,也参与误报纠错
前端·人工智能·腾讯云·edgeone
nuIl2 小时前
实现一个 Coding Agent(6):并行工具调用
前端·ai编程·cursor
Rain5092 小时前
2.1 Nest.js 项目初始化与模块化架构
开发语言·前端·javascript·后端·架构·数据分析·node.js
cjp5602 小时前
009. ASP.NET WEB API 用户关联esp32设备
前端·后端·asp.net