CSS修改未生效最常见原因是样式被覆盖或选择器权重不足；需检查DevTools中带删除线的规则、确认父容器高度、清除缓存、验证viewport标签及文件加载状态。
直接在浏览器里改CSS，为什么没生效？
最常见的情况是样式被覆盖或选择器权重不够。浏览器 DevTools 里看到的 CSS 规则如果带删除线（strikethrough），说明它被后面同名、更高优先级的规则干掉了。!important 虽然能强行提权，但会破坏可维护性，别一上来就加。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 右键元素 → “检查”，在 Styles 面板里逐条看哪些规则生效、哪些被划掉
- 注意选择器顺序：
.container .btn比.btn权重高；#nav比类名权重更高 - 确认是否在
<style></style>标签或外部 CSS 文件中重复定义了同一属性 - 检查是否启用了用户代理样式（比如
input默认有outline，常被忽略）
修改后页面没刷新，是不是缓存问题？
不是“没刷新”，而是浏览器可能读了旧的 CSS 文件或内联样式缓存。特别是本地双击打开 HTML 文件时，Chrome 有时会跳过重新解析样式表。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 强制刷新用
Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（macOS），绕过内存缓存 - 在 DevTools 的 Network 面板勾选
Disable cache，再刷新 - 如果是本地文件（
file://协议），尝试用 VS Code Live Server 插件起一个本地 HTTP 服务——很多样式行为（如相对路径、字体加载）只在 HTTP 环境下才正常 - 检查 CSS 文件是否真被加载：Network 面板里找
style.css，状态码不是200就说明路径错了
Flex 布局调半天不居中，到底卡在哪？
Flex 居中失效，90% 是因为父容器没设 display: flex，或者忘了给子元素设 justify-content / align-items。更隐蔽的是：父容器高度为 auto，导致 align-items: center 没参考系。
阿拉丁·前端工程工坊把「前端只会写页面、规范停在文档里、脚手架手敲、构建靠抄、性能靠猜、可访问性靠忘」从「手动搭项目、抄配置、肉眼查规范」升级成一条本地工具链——多框架脚手架生成(React/Vue3/Svelte + Vite)、可复用组件生成(Props 类型+样式+示例)、规范落地检查(lint-lite:命名/未用变量/console残留/TS any/目录结构)、构建配置生成与产物体积预算、性能审计(依赖体积/重复/懒加载/Lighthouse 清单)、可访问性(a11y)校验(alt/aria
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 先确认父容器有明确高度（比如
min-height: 100vh），否则垂直居中无效 - 用 DevTools 的 Layout 面板（Chrome）或 Flexbox Inspector（Firefox）直接看主轴/交叉轴方向
- 避免混用
margin: auto和justify-content—— 同一方向上两者冲突，margin: auto会赢，但行为不可控 -
flex-direction: column时，justify-content控制的是垂直方向，别记反
响应式断点改了，但手机上看还是老样子
根本原因常是漏写了关键的 <meta name="viewport"> 标签。没有它，移动端浏览器会按桌面宽度渲染，媒体查询自然不触发。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保
里有：<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 在 DevTools 切到设备模拟模式（
Ctrl+Shift+M），观察右上角是否显示真实 viewport 宽度（如 375px），而不是 980px 这种默认值 - 媒体查询写法要规范：
@media (max-width: 768px) { ... }中的768px是 CSS 像素，不是物理像素，别拿手机屏幕分辨率硬套 - 检查是否在其它 CSS 文件里写了更宽泛的规则（比如
font-size: 16px !important），把响应式设置盖掉了
真正卡住人的，往往不是语法写错，而是样式生效的前提条件被忽略了：viewport 缺失、父容器无高度、缓存没清、选择器权重算错。调试不是堆代码，是验证每一步依赖是否成立。
