css100个问题
一、基础概念
- CSS的全称及作用是什么？
- 行内样式、内部样式表、外部样式表的优先级？
- 解释CSS的层叠性（Cascading）
- CSS选择器优先级计算规则
- 伪类与伪元素的区别？举例说明
!important的作用及使用注意事项- 如何继承父元素字体大小但避免继承其他属性？
- CSS变量（Custom Properties）的定义与使用场景
- 媒体查询（
@media）的常见应用场景 - CSS预处理器（Sass/Less）的核心优势
二、盒模型与布局
- 标准盒模型 vs 怪异盒模型的区别
- 如何通过
box-sizing控制盒模型？ - 块级元素与行内元素的区别及常见标签
- 水平居中的5种实现方式
- 垂直居中的6种经典方案（Flex/Grid/定位等）
- BFC（块级格式化上下文）的触发条件与作用
- 清除浮动的原理与方法
margin塌陷问题及解决方案position各属性值的区别与应用场景z-index工作原理及层叠上下文
三、Flexbox布局
- Flex容器与项目的核心属性
- 如何实现两端对齐布局？
flex: 1的含义分解flex-grow与flex-shrink的计算规则- 实现圣杯布局的Flex方案
align-items与align-content的区别- 如何控制Flex项目的换行行为？
- Flex实现等高列布局的方法
- 绝对定位元素在Flex容器中的表现
- Flex布局的浏览器兼容性问题
四、Grid布局
- Grid布局的核心概念（轨道、单元格等）
- 显式网格与隐式网格的区别
fr单位的计算规则- 实现12列网格布局的Grid方案
grid-area的简写规则- 如何实现自适应图片画廊布局？
- Grid的自动排列（
auto-fitvsauto-fill） - 使用Grid实现圣杯布局
- 子网格（
subgrid）的应用场景 - Grid与Flexbox的选择依据
五、响应式设计
- 移动优先（Mobile First）的设计原则
- 视口（viewport）的meta标签配置
- 响应式图片的实现方案（srcset/sizes）
- 媒体查询中
min-width与max-width的匹配规则 - 隐藏元素的多种方法及区别（
display/visibility/opacity） - 移动端1像素边框问题的解决方案
- 如何实现自适应正方形元素？
- 移动端点击延迟问题与解决方案
- REM布局的原理与实现步骤
- 响应式表格的优化策略
六、动画与过渡
transition与animation的区别- 如何实现无限循环动画？
- 贝塞尔曲线（cubic-bezier）的作用
- 硬件加速的原理与实现方式
will-change属性的优化作用- 实现淡入淡出动画的两种方式
- 关键帧动画的百分比控制技巧
- 如何暂停CSS动画？
steps()函数在帧动画中的应用- 动画性能优化注意事项
七、CSS进阶
- CSS模块化的实现方案（BEM/CSS Modules）
- 伪元素
::before和::after的常见用法 - CSS计数器（counter）的应用场景
- 自定义滚动条样式的方法
- 实现毛玻璃效果（backdrop-filter）
- CSS混合模式（mix-blend-mode）的用法
- 如何实现文字渐变色效果？
- 剪切路径（clip-path）的创意应用
- CSS自定义属性实现主题切换
- 使用
@supports进行特性检测
八、性能与优化
- 哪些CSS属性会导致重排（Reflow）？
- 如何减少页面重绘（Repaint）？
- 使用
content-visibility优化渲染性能 - 优化CSS选择器性能的规则
- 如何减少CSS文件体积？
- 异步加载CSS的方法
- 关键CSS（Critical CSS）的提取策略
- 预加载CSS资源的实现方式
- 浏览器渲染流程中CSS的阻塞行为
- CSS与GPU加速的适用场景
九、调试与兼容性
- 处理CSS样式不生效的调试步骤
- 浏览器私有前缀的作用与处理方案
- CSS Reset与Normalize.css的区别
- 多行文本溢出显示省略号的实现
- 解决iOS滑动卡顿的
-webkit-overflow-scrolling - 处理Safari字体渲染差异的方法
- 检测并修复z-index层级混乱
- 移动端输入框聚焦样式问题处理
- 使用Feature Queries处理渐进增强
- 常见CSS Hacks技术（已过时，了解即可）
十、综合应用
- 实现一个三角形图标
- 纯CSS实现下拉菜单
- 实现吸顶（sticky）导航栏
- 自定义radio/checkbox样式
- 实现无限滚动的加载动画
- 构建响应式卡片网格布局
- 设计一个模态框（Modal）
- 制作平滑滚动锚点链接
- 实现图片懒加载的CSS辅助方案
- CSS最新特性（如:has()、容器查询）的了解程度
建议练习方式：
- 按模块逐个击破，手写代码验证
- 结合CodePen/Sandbox进行可视化调试
- 思考不同方案的优缺点及适用场景
- 关注CSS新特性规范（MDN文档）