前端技术文章
-
CSS变量+HSL组合切换主题色的底层逻辑是用:root定义可被JS动态修改的HSL变量，通过层叠实现全局响应；HSL仅调h值即可换主色且保协调，RGB易致对比崩坏。435 收藏 -
column-fill在Grid布局中完全不起作用，因为它是多列布局（CSSColumns）专属属性，与Grid布局模型无关；一旦使用display:grid，浏览器即进入Grid计算逻辑，所有多列相关属性（如column-fill、column-gap等）均被忽略。435 收藏 -
readonly保留值提交且支持聚焦复制，disabled禁用交互且不提交值；readonly仅对text/password/textarea有效，disabled全支持；需“禁用但提交”时应配合hidden字段。435 收藏 -
映射类型通过显式声明API契约（Req/Res）为双向绑定提供强类型基础，结合Zod校验、类型守卫与自动化工具链实现编译期检查和运行时防护。435 收藏 -
父元素高度塌陷是因浮动元素脱离文档流，解决方法是触发BFC（如overflow:hidden）或清除浮动（如::after+clear:both），现代布局推荐直接使用flex/grid。435 收藏 -
Autoprefixer结合Gulp可自动为CSS添加浏览器前缀，提升兼容性与开发效率。通过npm安装gulp、postcss、autoprefixer后，在gulpfile.js中配置css任务调用autoprefixer插件，并使用overrideBrowserslist或.browserslistrc文件指定目标浏览器范围，如>1%、last2versions；watch任务监听src/css/目录下的CSS文件变化，自动重新编译并输出到dist/css目录。推荐使用.browserslist435 收藏 -
float侧边菜单hover失效的主因是浮动致父容器高度塌陷，需用overflow:hidden等清除浮动来恢复hover作用域，而非修正CSS选择器。435 收藏 -
Firefox不支持-webkit-text-fill-color，须用background-clip:text+color:transparent实现渐变文字，且仅Firefox120+原生支持；旧版需降级为SVG或canvas。435 收藏 -
快速排序的核心逻辑是分治+原地分区：每次选pivot将数组划分为小于、等于、大于三部分，用双指针原地交换实现O(logn)空间复杂度。434 收藏 -
WebSocketreadyState为1不代表可安全发送消息，因服务端业务层可能未就绪、中间设备拦截或浏览器状态未同步，需结合服务端ACK确认和超时重连机制。434 收藏 -
浮动元素脱离文档流致后续块级元素绕行错位，clear:both通过强制元素边框框不与浮动元素重叠来解决，但现代推荐用display:flow-root或Flex/Grid布局替代。434 收藏 -
最稳妥纯CSS实现图片hover蒙层需用::after伪元素：父容器设position:relative，::after必须含content:""、position:absolute、top/left/right/bottom:0、background/opacity及transition，且transition须写在常态规则中。434 收藏 -
真正有效的DOM寻址收拢是建立有边界、可验证、按需触发的寻址层，核心为约定先行、封装隔离、延迟执行，通过语义化命名、集中配置、懒加载寻址器及渐进迁移实现稳定查找到查得稳。434 收藏 -
推荐用iframe替代object嵌入PDF，因其专为文档嵌入设计、不依赖type属性、支持全屏和手势缩放；object因浏览器兼容性差、易白屏或跳转系统应用，仅限可控环境且满足fallback等特定条件时使用。434 收藏 -
日常写HTML首选VSCode；需WYSIWYG编辑选CKEditor或TinyMCE；轻量修改用Notepad++或VSCodeLivePreview。434 收藏