-
HTML无法直接设置背景图片透明度，需用CSS多层背景叠加rgba色块或::before伪元素隔离图层；前者兼容性好，后者精准控制且不影响子元素。
-
用object-fit:cover可强制图片等比缩放并填满容器，多余部分裁剪；需配合明确宽高和overflow:hidden，IE不支持。
-
CSS通过transition属性实现元素平滑过渡，需设置property、duration、timing-function和delay四个参数，常用触发方式包括:hover、:focus及JavaScript操作，仅数值和颜色类属性支持动画。
-
右键“查看网页源代码”看不到真实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模块。
