-
-
CSS清除默认边距：重置margin和padding为0
-
直接设body{margin:0;padding:0;}不够用，因浏览器对h1、ul、form等元素有独立默认边距；需配合box-sizing:border-box并重置关键元素或选用normalize.css。
-
文章 ·
前端
| 2星期前 |
135浏览
收藏
-
-
HTML中如何监听元素焦点变化
-
focus/blur是监听元素获得/失去焦点最直接可靠的方式，仅在实际键盘/鼠标聚焦时触发，需元素可聚焦（如设tabindex）；推荐addEventListener而非onfocus属性，focusin/focusout支持事件委托。
-
文章 ·
前端
| 2星期前 |
489浏览
收藏
-
-
多级导航菜单布局与层级显示逻辑
-
子菜单不显示的主因是父级未设position:relative导致z-index失效；需同时满足父级relative定位、子菜单absolute+合理z-index，且避免overflow:hidden；移动端应改用:focus-within或checkbox模拟，注意IE11需JSfallback并添加ARIA属性。
-
文章 ·
前端
| 2星期前 |
378浏览
收藏
-
-
如何设置CSP frame-ancestors防嵌套
-
Content-Security-Policy的frame-ancestors指令必须通过HTTP响应头设置，<meta>标签无效；值需加引号并以分号结尾，如frame-ancestors'self'；其会完全覆盖X-Frame-Options，不可混用。
-
文章 ·
前端
| 2星期前 |
236浏览
收藏
-
-
CSS瀑布流入场动画技巧：nth-child递增延迟实现
-
瀑布流元素入场动画不能只靠统一animation-delay，因各列高度不一导致视觉顺序与DOM顺序错位；必须按实际渲染顺序递增延迟，:nth-child(n)适用于纯CSS多列布局，不适用于JS布局或GridMasonry。
-
文章 ·
前端
| 2星期前 |
313浏览
收藏
-
-
动态构建多态模块实例的import()参数技巧
-
可通过import()动态加载模块实现环境嗅探：先用条件逻辑确定路径再调用import()，封装为返回Promise的工厂函数，确保各环境模块接口一致，并在开发中结合HMR优化热更新。
-
文章 ·
前端
| 2星期前 |
272浏览
收藏
-
-
Less实现自适应长宽比容器方法
-
原生aspect-ratio已稳定支持，但需用Less封装@supports降级方案：输出aspect-ratio属性的同时，对不支持环境采用padding-top+绝对定位的伪元素技巧，并注意font-size:0避免空白间隙。
-
文章 ·
前端
| 2星期前 |
149浏览
收藏
-
-
-
iPhone测试HTML5页面方法与技巧
-
需借助原生调试工具与特定测试流程验证HTML5页面在iOSSafari中的渲染、交互及性能：一、Safari远程调试；二、控制台日志输出；三、iCloud同步与本地服务器预览；四、第三方云端服务；五、特性检测与降级提示。
-
文章 ·
前端
| 2星期前 |
316浏览
收藏
-
-
Set 与 Array.from 快速去重技巧
-
Array.from(newSet(arr))是原始值数组去重的最优解，时间复杂度O(n)，底层哈希优化，100万数据仅约3.2ms；而filter+indexOf为O(n²)，同场景慢260倍，且无法正确处理NaN。
-
文章 ·
前端
| 2星期前 |
173浏览
收藏
-
-
响应式导航栏实现方法：Media Queries适配技巧
-
结论：用@media(min-width:768px)控制桌面端显示、移动端默认隐藏+checkbox触发展开最稳；必须加viewportmeta标签，断点单位不能漏px，避免用a或submit按钮触发跳转，max-height过渡需设足够值，且移动端样式应写在媒体查询外作为默认。
-
文章 ·
前端
| 2星期前 |
497浏览
收藏
-
-
-
如何用CSS缩放单选框大小
-
直接设置width/height无效，应使用transform:scale()配合transform-origin:center缩放，并通过margin调整间距，确保可点击区域≥24×24px且兼顾可访问性。
-
文章 ·
前端
| 2星期前 |
377浏览
收藏
-
