前端技术文章
-
margin:auto在flex容器中能居中是因为它会吞噬主轴和交叉轴的剩余空间；前提是父容器为flex且子元素未设置flex-grow/shrink，且交叉轴尺寸必须可计算。272 收藏 -
可通过import()动态加载模块实现环境嗅探：先用条件逻辑确定路径再调用import()，封装为返回Promise的工厂函数，确保各环境模块接口一致，并在开发中结合HMR优化热更新。272 收藏 -
微信公众号不支持直接上传HTML文件，需手动提取兼容标签并适配：仅保留<p><span><strong><em><ul><ol><li>等基础标签，<img>必须用微信图床地址，删除所有style、class、script及非内容标签，标题改用<p><strong>，图片须重新上传，字号仅支持编辑器三档。272 收藏 -
:active伪类松手即失效，导致点击反馈“闪一下”；应配合JS添加.processing类控制持续状态，并用transition实现平滑过渡，避免仅依赖:active。272 收藏 -
media="print"仅在打印预览或window.print()调用时生效，普通浏览时不加载、不解析、不参与层叠；它不启用打印功能，只指定样式表专供打印上下文使用，且大小写敏感，必须严格写作print。272 收藏 -
backdrop-blur无效需先确认Tailwind≥3.1并在config中启用backdropBlur；侧边栏需半透明背景（如bg-white/10）、父容器无overflow:hidden，且背后有可模糊内容；iOS和微信需兼容处理。272 收藏 -
可以在子类静态方法中用super.方法名()调用父类静态方法，super此时是编译期确定的父类类名别名，直接定位父类静态成员，等价于ParentClass.方法名()，且this指向当前子类。272 收藏 -
用flex布局实现footer底部固定：父容器设display:flex+flex-direction:column+明确高度（或min-height），主体content用flex:1占剩余空间，footer自然贴底；避免absolute定位和height:100%。272 收藏 -
h1到h6的语义层级由HTML文档大纲决定，而非CSS样式；必须严格按嵌套顺序递进使用，避免视觉与语义错位，单页应用中宜用section/article包裹独立h1，隐藏h1需用clip-path等可访问方式，内容须简洁唯一、不可为空或含未解析变量。271 收藏 -
ApplicationCache（manifest）已全面废弃，导致白屏或加载失败；现代离线能力必须依赖ServiceWorker+CacheAPI，需正确实现install、fetch、activate三阶段逻辑，并注意作用域、HTML缓存风险及MIME干扰问题。271 收藏 -
setTimeout只执行一次，适合防抖、延迟初始化等单次调度；setInterval重复执行但易导致时间不准、回调堆积、内存泄漏，需显式清除，精准轮询推荐用递归setTimeout实现。271 收藏 -
font-variation-settings是控制可变字体轴值的底层属性，支持任意浮点值；而font-weight是语义化别名，仅映射预定义字重且会四舍五入。271 收藏 -
Number.isSafeInteger仅校验单个值是否为安全整数，不拦截运算、不跟踪过程、不防止溢出，需手动对每步中间结果显式校验，且无法替代业务逻辑判断。271 收藏 -
直接给<tr>设height基本无效，应通过<td>/<th>的height、line-height、vertical-align、padding及box-sizing联合控制行高，多行内容需用max-height或flex布局处理。271 收藏 -
HTML表格通过table、tr、td、th标签构建，用于清晰展示数据。示例包含姓名、年龄、城市三列，使用border-collapse合并边框，提升可读性与语义化，便于SEO和辅助技术识别。271 收藏