前端技术文章
-
justify-content:flex-start对最后一行无效，因其仅控制单行内主轴对齐且不识别“最后一行”；flex-wrap启用后浏览器为每行单独计算剩余空间，未填满时仍按容器级justify-content重新分配，导致居中或右偏。487 收藏 -
width:fit-content能用但受限于display类型、父容器布局和浏览器版本；Grid中需写为minmax(0,fit-content())，Flex中须设flex:00fit-content才生效。487 收藏 -
用PostCSS+preset-env、UnoCSS和cssnano配置模板统一多项目CSS工程化：共享.browserslistrc、按需生成工具类、标准化压缩，三者解耦可pin，避免黑盒脚手架维护困境。487 收藏 -
“处处上线”并非标准术语，实为对CI/CD误触发、配置不当（如webhook重复绑定、HMR失效）、K8s滚动更新、探针异常重启或Serverless冷启动等现象的口语化误称。487 收藏 -
语义化栅格布局应使用HTML5标签如header、main、section、article、aside和footer替代无意义div，结合CSSGrid的grid-template-areas与grid-area实现结构清晰、可访问性强的布局，保持DOM顺序与视觉一致，通过媒体查询响应式调整区域排列，确保内容层级逻辑完整，提升SEO、维护性和无障碍支持。487 收藏 -
HTML弹窗被拦截时浏览器静默失效，不抛错、不返回失败值、不触发回调；需在用户手势上下文（如click事件）中同步调用window.open()，或采用预留窗口（'about:blank'）再导航的合规方案。486 收藏 -
本文详解如何通过维护当前索引、重构数据结构与分离关注点，实现宝可梦图鉴中按需渲染单个条目（如初始显示妙蛙种子），而非一次性显示全部数据。486 收藏 -
position:sticky在flex布局中失效，因flex容器默认不创建滚动上下文；应改用fixed定位或确保父容器有明确高度和overflow-y:scroll，并避免transform等干扰属性。486 收藏 -
直接结论：在滚动容器上加overflow-anchor:none能关闭浏览器自动滚动补偿，避免内容插入时视口跳动；但必须配合“触底检测”逻辑，否则用户向上翻页时新消息会把当前阅读位置顶走。486 收藏 -
CSS变量不能在content属性中直接使用，因规范限制content仅支持字符串、attr()、counter()等特定值；可用counter-reset配合counter()间接显示数字变量值。486 收藏 -
flex居中失效最常见的原因是父容器未设display:flex，或子元素脱离文档流；需确认父容器启用flex、子元素未用absolute/floating，且父容器有明确高度。486 收藏 -
flex子项不收缩是因默认min-width:auto限制，需显式设min-width:0解除；配合flex:110、white-space:nowrap、overflow:hidden、text-overflow:ellipsis才能实现省略号效果。486 收藏 -
可用纯CSS实现抽象化猫Loading动画：通过clip-path裁剪与transform逐帧驱动，配合@keyframes控制耳朵抖动（错峰延迟+非线性缓动）、眯眼呼吸（异步scaleY+自定义cubic-bezier）及顿挫式尾巴摆动（steps(2,end)）。486 收藏 -
font-display必须显式设为swap以避免首屏白屏，它用系统字体先渲染再替换；preload字体需加crossorigin、as="font"和type；只用woff2格式；启用font-optical-sizing:auto提升可读性。486 收藏 -
选2D引擎更适合微信/抖音小游戏——因3D在H5环境加载慢、包体大、低端机掉帧严重；CocosCreator3.x首屏加载超8秒，而2D仅1.2秒。486 收藏