前端技术文章
-
CSS Flex 对齐文字和图标时，align-items: baseline 负责共享文字基线，行高与按钮默认样式决定细节；本文给出最小写法、inline-flex 替代方案和选择 center 的边界。474 收藏 -
解释 CSS :has() 与 :is() 组合时参数选择器如何参与优先级计算，说明为什么后写的规则仍可能失效，并给出用 :where()、拆分选择器和级联层恢复可维护覆盖关系的方法。474 收藏 -
当卡片标题、正文和按钮高度不一致时，CSS subgrid 可以让嵌套卡片共享父级网格轨道。本文用一组商品卡片拆开 grid-template-rows: subgrid 的生效条件、代码改法、@supports 回退与常见边界。474 收藏 -
JavaScript的rest参数是捕获函数多余实参的语法糖，必须位于形参末尾且唯一，生成真数组；与arguments不同，它原生支持数组方法、适用于箭头函数，且仅在函数参数、数组/对象解构中合法。474 收藏 -
Object.isExtensible仅用于检测对象是否可扩展，不能主动防范属性膨胀；真正防护需结合Object.preventExtensions设限、Proxy拦截非法新增、关键节点断言校验，并规避误用陷阱。474 收藏 -
code标签仅提供语义标识，不保留格式；多行代码必须嵌套在pre中，二者分工明确：pre保留空白符，code声明代码语义，且HTML字符需转义。474 收藏 -
float是实现文字环绕图片最轻量、兼容性最好的原生方案，需为图片显式设置width（或max-width）和float，文字必须紧跟其后且处于同一BFC中，同时注意父容器坍缩问题。474 收藏 -
JavaScript并发控制通过Promise+队列+计数器实现，用固定槽位限制同时执行任务数（如3个），新任务入队等待空闲，running计数器跟踪运行中任务，完成即释放槽位并调度下一个。474 收藏 -
DOM是浏览器将HTML转换成的JS可操作对象树，以document为根节点，包含元素、文本等节点；应优先用querySelector、classList、textContent等现代API安全高效操作。474 收藏 -
JavaScript中Array.prototype.sort()实现多属性排序需在单个比较函数中按优先级逐级比较：先比部门升序（localeCompare），再比年龄降序（b-a），最后比姓名升序（localeCompare），避免多次sort调用覆盖结果。474 收藏 -
bottom:0只对position为absolute、fixed或sticky的元素生效，且依赖最近已定位祖先（如position:relative）作为参考系；若无，则锚定视口底部。474 收藏 -
Flex适用于一维布局（单行/列对齐、分布、顺序调整），Grid专用于二维网格（行列同时控制）；二者分工明确，常嵌套使用——Grid作外层区域划分，Flex处理内部细节对齐。474 收藏 -
grid-column-gap控制列间水平间距，row-gap控制行间垂直间距；前者作用于列轴，后者作用于行轴，两者均推荐用column-gap和row-gap替代以提升跨布局通用性。474 收藏 -
Nginx能做WebSocket负载均衡，但必须配置proxy_http_version1.1、Upgrade/Connection头透传、proxy_read_timeout与proxy_send_timeout延长至86400、禁用缓冲，并依后端状态选择ip_hash或least_conn算法。474 收藏 -
文字环绕浮动图片需用float:left/right，图片须为普通流内元素并设width和margin；后续块级元素可能清除浮动导致环绕失效，关键在父容器与兄弟元素的样式交互。474 收藏