前端技术文章
-
flex-wrap用于控制Flex子元素是否换行，默认值为nowrap，必须显式设为wrap或wrap-reverse才能换行；其行为受flex-direction主轴影响，换行方向随之改变。434 收藏 -
Flex垂直居中失效主因是父容器无高度、为inline-flex或子元素绝对定位；Grid的place-items失效主因是未定义grid-template-rows、存在wrapper嵌套或子元素设置align-self覆盖。434 收藏 -
Tailwind不支持empty:变体，因其未内置结构伪类解析；需用@layercomponents自定义或兄弟元素+:emptyCSS实现，注意DOM空白节点和框架渲染导致的失灵问题。434 收藏 -
内联样式仅限邮件模板、SSR首屏关键样式等不可替代场景，其余必须用外部样式表；因其特异性最高但破坏可维护性，混用时会覆盖伪类、媒体查询等所有CSS规则。434 收藏 -
absolute+margin:auto居中需同时满足四边为0、宽高明确、父容器为定位上下文；遮罩场景易因裁剪、滚动偏移、视口变化失效，推荐fixed+flex替代。434 收藏 -
正确做法是用<picture>+srcset按设备像素比和视口宽度自动选图，input[type="number"]设min/max/step防误输，localStorage存取购物车需初始化默认值并实时保存，表单提交应绑定submit事件并preventDefault。434 收藏 -
transition属性必须写全，仅用all会导致Chrome/Safari/Firefox行为不一致；Safari中transform卡顿需加translateZ(0)或will-change；IE/EdgeLegacy不支持ease-in-out等缓动函数，须用cubic-bezier()显式声明；height:auto无法参与过渡。434 收藏 -
HTML解析被阻塞主因是CSS和JS加载顺序不当：link样式表会暂停HTML解析直至CSSOM构建完成，同步脚本则阻塞DOM构建；应善用media属性异步加载非关键CSS、defer保序执行关键JS，并避免document.write。434 收藏 -
flex-wrap后justify-content:center不居中，因其仅对每行内子项生效，末行子项不足时靠左；真正整体居中应选grid布局或text-align+inline-flex方案。434 收藏 -
字体加载失败主因是路径错误或格式声明不匹配：路径须相对于CSS文件，且@font-face的src需与文件类型及浏览器兼容性一致；推荐优先使用woff2并提供fallback。434 收藏 -
响应式字体大小通过clamp()函数实现，结合最小、理想和最大值，确保文字在不同设备上清晰可读，无需依赖媒体查询。434 收藏 -
高阶函数剥离埋点的核心是用包装器自动注入日志、耗时统计与上报逻辑，业务函数零修改；支持同步/异步、动态配置、环境隔离及装饰器协同，确保异常不丢失、上报不遗漏。434 收藏 -
BEM类名必须严格遵循block__element--modifier三段式结构，分隔符不可替换；禁用泛义块名、禁止元素名单独出现、修饰符不得嵌套或含样式值，所有命名须具备自解释性。434 收藏 -
HTML表单需严格遵循语义化标签组合：必须用<form>包裹，正确设置action（推荐完整路径）和method（敏感操作显式设为POST）；<input>类型要匹配语义（如email、number、password），name属性不可缺失；<label>须通过for与id绑定或嵌套<input>；提交按钮必须是type="submit"。434 收藏 -
直接用window.scrollTo在React/Vue中跳不准，因目标元素可能未渲染、SSR与客户端DOM不一致或异步组件未挂载；应延后执行、用getBoundingClientRect计算位置，并注意兼容性与样式影响。434 收藏