css100个问题

一、基础概念

  1. CSS的全称及作用是什么?
  2. 行内样式、内部样式表、外部样式表的优先级?
  3. 解释CSS的层叠性(Cascading)
  4. CSS选择器优先级计算规则
  5. 伪类与伪元素的区别?举例说明
  6. !important的作用及使用注意事项
  7. 如何继承父元素字体大小但避免继承其他属性?
  8. CSS变量(Custom Properties)的定义与使用场景
  9. 媒体查询(@media)的常见应用场景
  10. CSS预处理器(Sass/Less)的核心优势

二、盒模型与布局

  1. 标准盒模型 vs 怪异盒模型的区别
  2. 如何通过box-sizing控制盒模型?
  3. 块级元素与行内元素的区别及常见标签
  4. 水平居中的5种实现方式
  5. 垂直居中的6种经典方案(Flex/Grid/定位等)
  6. BFC(块级格式化上下文)的触发条件与作用
  7. 清除浮动的原理与方法
  8. margin塌陷问题及解决方案
  9. position各属性值的区别与应用场景
  10. z-index工作原理及层叠上下文

三、Flexbox布局

  1. Flex容器与项目的核心属性
  2. 如何实现两端对齐布局?
  3. flex: 1的含义分解
  4. flex-growflex-shrink的计算规则
  5. 实现圣杯布局的Flex方案
  6. align-itemsalign-content的区别
  7. 如何控制Flex项目的换行行为?
  8. Flex实现等高列布局的方法
  9. 绝对定位元素在Flex容器中的表现
  10. Flex布局的浏览器兼容性问题

四、Grid布局

  1. Grid布局的核心概念(轨道、单元格等)
  2. 显式网格与隐式网格的区别
  3. fr单位的计算规则
  4. 实现12列网格布局的Grid方案
  5. grid-area的简写规则
  6. 如何实现自适应图片画廊布局?
  7. Grid的自动排列(auto-fit vs auto-fill
  8. 使用Grid实现圣杯布局
  9. 子网格(subgrid)的应用场景
  10. Grid与Flexbox的选择依据

五、响应式设计

  1. 移动优先(Mobile First)的设计原则
  2. 视口(viewport)的meta标签配置
  3. 响应式图片的实现方案(srcset/sizes)
  4. 媒体查询中min-widthmax-width的匹配规则
  5. 隐藏元素的多种方法及区别(display/visibility/opacity)
  6. 移动端1像素边框问题的解决方案
  7. 如何实现自适应正方形元素?
  8. 移动端点击延迟问题与解决方案
  9. REM布局的原理与实现步骤
  10. 响应式表格的优化策略

六、动画与过渡

  1. transitionanimation的区别
  2. 如何实现无限循环动画?
  3. 贝塞尔曲线(cubic-bezier)的作用
  4. 硬件加速的原理与实现方式
  5. will-change属性的优化作用
  6. 实现淡入淡出动画的两种方式
  7. 关键帧动画的百分比控制技巧
  8. 如何暂停CSS动画?
  9. steps()函数在帧动画中的应用
  10. 动画性能优化注意事项

七、CSS进阶

  1. CSS模块化的实现方案(BEM/CSS Modules)
  2. 伪元素::before::after的常见用法
  3. CSS计数器(counter)的应用场景
  4. 自定义滚动条样式的方法
  5. 实现毛玻璃效果(backdrop-filter)
  6. CSS混合模式(mix-blend-mode)的用法
  7. 如何实现文字渐变色效果?
  8. 剪切路径(clip-path)的创意应用
  9. CSS自定义属性实现主题切换
  10. 使用@supports进行特性检测

八、性能与优化

  1. 哪些CSS属性会导致重排(Reflow)?
  2. 如何减少页面重绘(Repaint)?
  3. 使用content-visibility优化渲染性能
  4. 优化CSS选择器性能的规则
  5. 如何减少CSS文件体积?
  6. 异步加载CSS的方法
  7. 关键CSS(Critical CSS)的提取策略
  8. 预加载CSS资源的实现方式
  9. 浏览器渲染流程中CSS的阻塞行为
  10. CSS与GPU加速的适用场景

九、调试与兼容性

  1. 处理CSS样式不生效的调试步骤
  2. 浏览器私有前缀的作用与处理方案
  3. CSS Reset与Normalize.css的区别
  4. 多行文本溢出显示省略号的实现
  5. 解决iOS滑动卡顿的-webkit-overflow-scrolling
  6. 处理Safari字体渲染差异的方法
  7. 检测并修复z-index层级混乱
  8. 移动端输入框聚焦样式问题处理
  9. 使用Feature Queries处理渐进增强
  10. 常见CSS Hacks技术(已过时,了解即可)

十、综合应用

  1. 实现一个三角形图标
  2. 纯CSS实现下拉菜单
  3. 实现吸顶(sticky)导航栏
  4. 自定义radio/checkbox样式
  5. 实现无限滚动的加载动画
  6. 构建响应式卡片网格布局
  7. 设计一个模态框(Modal)
  8. 制作平滑滚动锚点链接
  9. 实现图片懒加载的CSS辅助方案
  10. CSS最新特性(如:has()、容器查询)的了解程度

建议练习方式

  1. 按模块逐个击破,手写代码验证
  2. 结合CodePen/Sandbox进行可视化调试
  3. 思考不同方案的优缺点及适用场景
  4. 关注CSS新特性规范(MDN文档)
相关推荐
前端御书房2 分钟前
基于 Trae 的超轻量级前端架构设计与性能优化实践
前端·性能优化
南部余额8 分钟前
playwright解决重复登录问题,通过pytest夹具自动读取storage_state用户状态信息
前端·爬虫·python·ui·pytest·pylawright
前端与小赵18 分钟前
webpack和vite之间的区别
前端·webpack·vite
zy01010121 分钟前
React受控表单绑定
前端·javascript·react.js·mvvm·双向数据绑定
百锦再22 分钟前
React编程的核心概念:数据流与观察者模式
前端·javascript·vue.js·观察者模式·react.js·前端框架·ecmascript
2401_8724878824 分钟前
网络安全之前端学习(css篇2)
前端·css·学习
SuperYing34 分钟前
前端候选人突围指南:让面试官主动追着要简历的五大特质(个人总结版)
前端·面试
前端双越老师37 分钟前
我的编程经验与认知
前端
linweidong43 分钟前
前端Three.js面试题及参考答案
前端·javascript·vue.js·typescript·前端框架·three.js·前端面经
GISer_Jing1 小时前
前端常问的宏观“大”问题详解(二)
linux·前端·ubuntu