display: none 彻底移出渲染流，visibility: hidden 仍占位且可交互；前者触发重排，后者适用于动画过渡或需保留坐标场景。
HTML 格式化隐藏技巧：display: none 和 visibility: hidden 的区别在哪
二者都让元素“看不见”，但浏览器处理方式完全不同——display: none 彻底移出渲染流，visibility: hidden 仍占位、仍可被 JS 访问、仍响应伪类（如 :hover）。
常见错误现象：visibility: hidden 下元素意外触发点击或影响布局高度；display: none 后用 JS 读取 offsetHeight 得到 0，误判为“加载失败”。
- 用
display: none当你确定该区域长期不参与交互，且希望父容器重排（re-flow） - 用
visibility: hidden当你需要保留占位（比如动画过渡、表单校验提示暂隐）、或依赖其 DOM 存在性（如getBoundingClientRect()需要坐标但不想显示） - 注意兼容性：
visibility: hidden在<tr> 或 <code><colgroup></colgroup>上行为不一致，部分浏览器会忽略；display: none在<option></option>上无效（得用disabled或移除节点）HTML 格式化特殊效果：white-space 和 text-overflow 组合失效怎么办
单独设
white-space: nowrap+text-overflow: ellipsis不生效，是因为还缺一个关键前提：元素必须是块级且宽度受限，同时overflow: hidden必须显式声明。使用场景：表格单元格、卡片标题、导航菜单文字截断。
立即学习“前端免费学习笔记（深入）”；
- 必须同时满足三个条件：
white-space: nowrap、overflow: hidden、text-overflow: ellipsis，缺一不可 - 如果父容器是
flex布局，子项默认不收缩，需加min-width: 0或flex-shrink: 1才能触发截断 - 对多行截断，
text-overflow无解，得用-webkit-line-clamp（仅 WebKit），或 JS 方案（如clamp.js） - 注意字体渲染差异：中英文混排时，
ellipsis可能吞掉半个汉字，建议用text-overflow: "…"（带引号的字符串值）提升一致性
HTML 格式化隐藏技巧：用
aria-hidden="true"时为什么屏幕阅读器还在读根本原因：仅设
aria-hidden="true"不影响 DOM 结构或焦点管理，若元素本身可聚焦（如button、a、带tabindex的div），它仍能被键盘 tab 到，且某些屏幕阅读器会忽略aria-hidden对可聚焦元素的屏蔽。常见错误现象：模态框背景遮罩层加了
aria-hidden="true"，但用户按 Tab 键仍能跳进背后按钮；图标用span+aria-hidden="true"，但没删title属性，导致重复播报。- 可聚焦元素禁用无障碍访问，优先用
inert属性（现代浏览器支持），或组合aria-hidden="true"+tabindex="-1"+ 移除title -
aria-hidden="true"应作用于整个不可交互区域（如侧边栏、弹窗 backdrop），而不是单个图标或装饰性文本 - 不要和
role="presentation"混用——后者只改语义角色，不隐藏内容；aria-hidden="true"是强制隐藏，但不改变焦点行为
HTML 格式化特殊效果：CSS 自定义属性（
--var）在内联 style 中怎么动态更新内联
style里写--color: red是合法的，但 JS 修改时不能直接操作element.style.--color，因为破折号不是合法 JS 属性名。使用场景：主题切换、实时配色预览、组件级样式隔离。
- 正确写法是
element.style.setProperty('--color', 'blue')；读取用getComputedStyle(element).getPropertyValue('--color') - 避免在大量元素上高频调用
setProperty，性能敏感场景建议批量更新<style>标签或切换预设 class - 注意继承性：自定义属性默认可继承，若不希望子元素继承，需在子选择器中显式重置（如
.child { --color: initial; }） - IE 完全不支持，如需兼容，得用 CSS 类名切换 + JS 控制 class 列表
最常被忽略的一点：
aria-hidden和display: none虽然视觉效果相似，但前者不阻止焦点进入，后者连 DOM 渲染都跳过——选错可能直接让键盘用户卡死在不可见按钮上。 - 必须同时满足三个条件：
