-
HTML5拖放需在dragstart中调用dataTransfer.setData()传数据，dragover必须preventDefault()才能触发drop，移动端不支持原生API需降级处理。
-
闭包是React函数组件实现稳定状态逻辑的底层机制，它使每次Hook调用都能独立捕获并维持当前渲染环境的状态快照，确保自定义Hook中变量生命周期可靠、事件处理器能正确读取最新值，并支撑Hook调用顺序契约。
-
状态机模式重构前端异步交互，核心是将“何时做、做完去哪、出错如何退”提炼为清晰可测的状态转换图；典型WiFi配网状态含idle、scanning、connecting、connected、error；状态名用名词、禁手动赋值、事件驱动迁移；副作用隔离于invoke中，错误统一收口至error状态；配合XState工具链实现可视化、类型安全与跨框架复用。
-
Tailwind默认不启用textShadow工具类，需手动配置插件或使用arbitraryvalues；插件方式需安装并注册@ryano/tailwind-css-text-shadow，arbitraryvalues则用下划线替代空格书写完整阴影值。
-
nth-child基于DOM静态位置索引，不响应动态插入、显隐或重排；JS插入新元素会改变原有元素序号，导致样式错位，需手动重置类名或用MutationObserver监听更新。
-
@media(orientation:landscape)单独使用效果差，因它仅检测方向而不感知视口高度骤减、vh抖动、fixed偏移及系统UI干扰等真实问题。
-
媒体查询必须配合正确的viewport标签才能生效，正确写法是<metaname="viewport"content="width=device-width,initial-scale=1.0">，断点应由内容实际错乱位置决定，优先使用min-width和相对单位，布局推荐flex或grid。
-
navigator.deviceMemory无法获取精确内存信息，只能提供近似值。1.navigator.deviceMemory是当前唯一标准属性，但返回的是2的幂次方近似值，如4、8等，并非真实GB数；2.浏览器出于隐私保护限制精确值，防止用户指纹识别；3.可通过该值粗略判断设备性能，指导资源加载策略，如高配设备加载高清图，低配设备优化资源；4.其他API如performance.memory仅反映JS堆内存使用情况，无法获取整机内存；5.若需更详细硬件信息，需借助原生应用或特定环境工具。
-
点击“展开全文”切换显示状态的核心是用JavaScript控制文本内容与按钮状态，配合data-expanded等属性记录状态，优先服务端提供摘要字段以避免前端DOM解析风险。
-
块级元素水平居中需满足两个前提：必须是块级元素且设置明确宽度，然后使用margin:0auto；若无效，需检查是否浮动、定位或父容器为Flex布局。
-
JavaScript属性的枚举性（[[Enumerable]]）控制其是否在for...in、Object.keys()等遍历中出现：true时可见，false时“隐身”但依然存在；普通添加默认true，Object.defineProperty默认false。
-
并发读取多文件局部字节块本身不直接加速哈希签名，真正提速在于I/O与CPU解耦、多核并行及规避主线程阻塞，关键依赖“分片+Worker+零拷贝”协同。
-
Nunjucks原生不支持{%include"xxx"with{...}%}语法，但可通过自定义render过滤器安全、递归地传递上下文数据，实现类似React的props下传效果。本文详解替代方案、代码实现及关键注意事项。
-
VSCode中按!+Tab可快速生成标准HTML5模板，无需配置，兼容性好、结构干净；而在线生成器常导致冗余代码、性能差和维护难。
-
使用box-sizing:border-box可让宽度包含padding和border，避免浮动元素超出父容器；需统一设置子元素及父容器该属性，并配合百分比宽度实现响应式布局。浮动导致父容器高度塌陷时，应采用clearfix或overflow:hidden触发BFC以清除影响。为防止margin叠加引发换行，建议仅设置单侧外边距并移除最后一个元素的外边距，结合固定padding提升兼容性。通过精确控制盒模型尺寸、合理清除浮动及间距管理，能有效提升浮动布局的稳定性和可维护性。
