-
图片在小屏变形主因是固定宽高或仅设width:100%而未控高；解决方式为img{max-width:100%;height:auto}，确保等比缩放不溢出；需移除height显式设置、overflow:hidden干扰及flex/grid限制。
-
FileReaderAPI是HTML5提供的用于读取用户通过<inputtype="file">选择的文件内容的接口，它不访问本地文件系统，仅处理用户主动选择的文件。核心步骤包括：①创建文件输入框让用户选择文件；②监听change事件获取FileList对象；③使用FileReader实例并调用合适的读取方法（如readAsText、readAsDataURL等）；④通过onload事件获取读取结果；⑤可选监听onerror和onprogress处理错误与进度。FileRe
-
align-content管理多行flex容器中各行在交叉轴上的间距分配，仅在flex-wrap:wrap且交叉轴有剩余空间时生效；它不控制单个项目，而是调节行与行之间的空隙分布。
-
边框三角形本质是利用宽高为0元素的四边框交界斜角形成，必须保持三边透明且等宽、一边实色；设任一边border-width为0会破坏交角导致消失，伪元素中使用最安全。
-
直接使用<inputtype="date">即可唤起系统日期选择器，但需满足两个条件：浏览器支持（Chrome/Firefox/Edge/Opera及Safari14.1+）且value必须为YYYY-MM-DD格式字符串，否则控件失效或降级为文本框。
-
文字紧贴盒子上下边仍有空隙是因line-height大于字体实际高度及字体ascent/descent区域所致；line-height:1非万能，需配合font-size、vertical-align或flex等综合处理。
-
本文详解为何直接stub模块内require()的第三方函数无效，并提供可落地的模块解耦+Sinon精准打桩方案，彻底解决测试中“已mock却仍执行真实逻辑并抛出ENOENT”问题。
-
应避免混合使用浮动与Flexbox布局。当父容器设为display:flex时，子元素的float属性失效，需用justify-content等Flex属性对齐；同时注意浮动元素可能影响Flex容器位置，必要时通过clear或overflow清除干扰；在响应式设计中建议统一采用Flexbox以保证一致性。
-
标签语句本身不执行任何操作，仅用于为语句命名以供break或continue精确跳转非最近一层循环或代码块；标签由标识符加冒号构成，须紧贴目标语句前且仅适用于声明、块、循环或switch语句。
-
JavaScript中条件语句用于根据条件执行不同代码块，主要使用if...else和switch。if...else适用于布尔判断和多条件分支，如年龄判断和成绩分级；switch则适合变量匹配多个固定值，如星期几的判断，代码更清晰。选择依据是：复杂条件或范围判断用if...else，固定值匹配用switch。break在switch中防止穿透，需注意使用。
-
@import不推荐使用，因其同步阻塞加载、无法被预加载器识别、导致串行瀑布请求，并存在旧版IE兼容问题及构建工具支持不足等缺陷。
-
CSS的:not()仅支持单个简单选择器，无法否定层级关系；需用作用域类、all:unset、BEM命名或JS判断祖先来实现精准控制。
-
页码必须用CSS@page规则配合counter(page)实现，Puppeteer需启用displayHeaderFooter:true，且@page必须位于顶层CSS；分节页码需结合counter-reset与counter-increment控制。
-
text-align:justify仅对块级文本容器（如p、div）生效，需内容至少两行；对内联元素、替换元素、单行文本、pre及flex/grid容器无效；中文需额外处理才可两端对齐。
-
Map的键支持对象/函数且不转字符串，而Object会将对象键转为"[objectObject]"导致覆盖；Map用SameValueZero比较保留引用，遍历严格按插入顺序，提供size、has()等确定性API，不可用中括号或点号访问。
