结论：别改源码，先用浏览器Elements面板实时试错——90%的样式问题3分钟内可定位验证；需通过Force state触发伪类、勾选开关规则、空白处新增声明、比对Computed与Styles面板及检查灰色被覆盖规则来确保修改有效。
直接说结论：别改源码，先用浏览器 Elements 面板实时试错——90% 的样式问题，3 分钟内就能定位和验证。
Elements 面板里怎么改样式才不白忙
很多人打开 F12 后点进 Elements，看到右侧 CSS 样式区就急着改代码，结果刷新就消失，白费力气。关键不是“能不能改”，而是“改了之后怎么判断是不是真解决问题”。
- 右键点击任意元素 → 选
Force state（比如:hover）可强制触发伪类，不用靠鼠标悬停去凑 - 勾选/取消左侧属性前的小方块，能秒级开关某条 CSS 规则，比删代码快得多
- 在样式区空白处双击，可新增临时声明（如
outline: 2px solid red），快速标出元素边界，排查塌陷或错位 - 修改后若页面没反应，先看该样式是否被
!important或更高优先级规则覆盖——Elements 右侧会把被划掉的属性标成灰色
为什么改了 CSS 却没生效？优先查这三处
常见假象是“我明明写了 margin-top: 20px，但元素就是不动”。实际往往卡在继承、层叠或计算值上。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 看右上角
Computed标签页：它显示浏览器最终应用的数值，比如你写margin: 10px，这里会拆成margin-top: 10px等四项，且带单位；如果显示0px，说明被重置或覆盖了 - 检查
Styles面板里规则来源：带element.style的是行内样式，index.css:12是外部文件第 12 行，灰色文字的是被覆盖的规则 - 注意盒模型显示区（右下角小盒子图）：如果
margin显示为 0，但你想设的是负值，可能父容器有overflow: hidden把它裁掉了
调试响应式样式时，viewport 和媒体查询怎么配合看
单纯缩放窗口看不出问题，必须模拟真实设备断点。
立即学习“前端免费学习笔记（深入）”；
- 按
Ctrl+Shift+M（Win/Linux）或Cmd+Opt+M（Mac）进入设备模拟模式，顶部可选预设尺寸（如 iPhone SE、Pixel 5） - 在 Elements 的
Styles面板里，媒体查询规则会折叠成一行，带@media前缀；鼠标悬停会显示触发条件（如(max-width: 768px)），点右边小箭头可展开 - 想临时禁用某条媒体查询？把它的
@media整行注释掉（加/* */），别删——避免误操作影响其他规则 - 注意：某些样式只在特定 viewport 宽度下才生效，比如
width: 100vw在 iOS Safari 下可能因地址栏收起/展开而跳变，得真机连 DevTools 测
真正卡住人的从来不是“不会写 CSS”，而是不知道浏览器到底用了哪条规则、在哪一步算出了那个值。Elements 面板的 Computed 和 Styles 并排看，比对着文档猜强十倍。别跳过“被划掉的那行灰色代码”——它往往就是答案。
