-
右键“查看网页源代码”看不到真实HTML是因为现代网页依赖JavaScript动态渲染，它只显示服务器返回的初始HTML；而开发者工具的「元素」面板展示的是JS执行后的实时DOM树。
-
块级元素默认宽度占满父容器、高度由内容撑开；高度不继承父级，需显式设置父容器height/min-height；存在margin合并、content-box计算及HTML语义嵌套限制。
-
本文介绍一种不依赖显式宽高声明、利用inline-grid布局让父容器自动撑开以容纳所有绝对定位子元素的现代CSS解决方案，适用于内联文本流中叠加多层内容的场景。
-
模态窗宽度用%撑满全屏，主因是父容器无明确宽度或模态窗未脱离文档流且缺max-width约束；应设父容器width/max-width、模态窗自身合理max-width（如min(800px,90vw)），并注意box-sizing、居中方式及键盘弹出时vw抖动问题。
-
ins标签的cite属性用于指定文本插入原因的来源URL，datetime属性用于定义插入的日期和时间，两者均以语义化方式记录修改信息；ins标签默认以下划线显示插入内容，可通过CSS自定义样式，常与del标签配合使用以展示文档修订历史，相比直接添加文本，ins标签具有更强的语义化优势，有助于搜索引擎和辅助技术理解内容变更。
-
应使用aria-current="step"标记当前答题卡，因其是浏览器原生支持的语义化方式，屏幕阅读器可直接识别“当前步骤”，配合[aria-current="step"]CSS选择器与data-status区分业务状态，确保无障碍、多设备、服务端渲染下状态准确一致。
-
Prettier负责代码格式统一，ESLint专注逻辑错误与质量检查；二者分工明确、互补协作，通过eslint-config-prettier避免冲突，实现提交前自动检查与格式化。
-
table单元格width较可靠而height常失效，因行高由最高单元格决定；正方形单元格需结合tr高度、line-height、vertical-align或aspect-ratio等综合实现。
-
Modernizr是全局特性检测最省事方案，通过DOM测试而非UA判断API支持，v3+需定制构建；单API检测用in/typeof/!!组合更轻量；CSS特性优先用CSS.supports()，兼容性不足时回退到style属性探测；运行时动态检测比加载时更关键。
-
必须用<button>做汉堡菜单开关，因其原生支持可访问性；需设type="button"防表单提交，配合aria-expanded与aria-controls严格配对，并为SVG图标添加aria-hidden="true"。
-
闭包是JavaScript中保留变量值且不污染全局作用域的唯一可靠方式；其本质是内部函数引用外部变量并在外部函数返回后仍可访问，需通过返回或赋值使内部函数逃逸作用域。
-
gap在多列布局中不管用，仅对grid和flex有效；多列布局需用column-gap替代，且其与gap同名不同源，属multi-column模块。
-
Array.prototype.sort()默认按字符串字典序排序，导致数值排序错误；需传入比较函数如(a,b)=>a-b实现数字排序；它原地修改数组，稳定性和可控性不足时需手写排序。
-
::placeholder不生效主因是样式被全局重置覆盖，需用input::placeholder等具体选择器并检查开发者工具中的删除线；IE11需额外加::-ms-input-placeholder；优先用rgba()确保可访问性对比度；iOSSafari会强制缩小placeholder字体，应通过color和letter-spacing优化而非font-size。
-
使用grid-auto-rows实现响应式行高需结合minmax()、fr单位和媒体查询。1.minmax(80px,auto)设置最小行高并允许内容撑开；2.全屏布局用grid-auto-rows:1fr均分视口高度；3.媒体查询在不同断点调整列数与行高，如大屏3列60px、小屏单列40px；4.内容自适应场景用minmax(120px,max-content)平衡可读性与扩展性，配合flex布局优化卡片内容排列。
