前端技术文章
-
header和footer是语义容器而非视觉标签，必须依附于body、article等明确作用域；禁止嵌套、滥用或仅作样式用途，否则破坏可访问性、SEO及结构解析。456 收藏 -
absolute子菜单总飘左上角是因为父级未设position:relative；它相对于最近非static祖先定位，若无则贴body；须确保直接父容器（如li.menu-item）设relative，且DOM无缝隙、交互全覆盖。114 收藏 -
Vite原生支持Less，只需安装less包，无需less-loader；必须配置additionalData或modifyVars才能复用全局变量和mixin，二者用途不同且不可混用。143 收藏 -
inline-block间隙本质是HTML换行符渲染为空格字符，其像素宽度由父容器font-size和字体空格字宽决定，不同浏览器对空格度量存在差异，导致Chrome约3px、Safari约4px、Firefox约3.5px间隙。276 收藏 -
BEM通过“块__元素--修饰符”结构解决CSS作用域失控问题：user-card__avatar--large明确标识模块归属、部件身份与状态变体，避免同名类冲突与语义混淆。437 收藏 -
clip-path动画在PPT切场中常失效，因inset()与polygon()等函数参数结构不兼容无法插值；仅同一函数内参数变化或path()（Chrome102+/Safari16.4+）可平滑过渡；推荐用inset()配合CSS变量和cubic-bezier实现四向压入效果，并注意Firefox卡顿及iOSSafari路径长度限制。170 收藏 -
浮动塌陷致父容器高度为0，因浮动元素脱离文档流；IE6–8存在双倍边距、3像素bug等兼容问题；推荐用overflow:hidden触发BFC或display:inline修复，新项目优先用flex并注意IE10前缀。307 收藏 -
首选grid-template-columns:repeat(auto-fit,minmax(300px,1fr))，因其实现纯CSS列数自适应，无需JS或框架，兼容性好、逻辑清晰、维护成本低。175 收藏 -
&符号在Less中代表当前嵌套路径的完整祖先选择器序列，而非简单拼接；它绑定于所在规则块的直接父级，不支持字符串切片或运行时解析。304 收藏 -
Proxy封装localStorage是实时监控本页操作的务实方案：拦截setItem等方法实现敏感键写入告警、删除审计与上下文追溯，弥补storage事件无法监听本页修改的缺陷。175 收藏 -
Proxy用于创建对象代理以拦截和自定义操作，Reflect提供调用默认行为的统一方法，二者结合可实现日志记录、数据绑定、类型校验等功能，如通过get/set捕获器监控属性访问与修改，并利用Reflect保留原始行为，广泛应用于响应式系统（如Vue3）、数据验证和调试工具中。380 收藏 -
BackgroundFetch不能直接下载HTML并渲染，仅Chrome84+/Edge90+支持，需HTTPS、用户手势等条件；它只后台下载资源，不处理DOM或缓存，真正可行方案是配合fetch+CacheAPI预存HTML。420 收藏 -
CSS变量可动态控制background-position，需在:root或选择器内声明带单位的变量，用var()调用并配合calc()计算，多背景图时须一一对应变量，注意兼容性与生命周期管理。280 收藏 -
overflow-wrap:break-word单独写基本无效，必须配合显式宽度（width/max-width）、min-width:0（Flex/Grid子项）、white-space:normal且无nowrap/pre冲突才能生效。218 收藏 -
PendingPromise本身不导致内存泄漏，但若持有闭包、DOM、大对象或async上下文等强引用，则会阻碍GC；需通过DevTools检查Retainers、避免悬空链、注入超时与取消机制来防控。115 收藏