前端技术文章
-
- CSSGrid固定比例视频容器设置技巧
- Grid本身不支持宽高联动，设1fr或minmax仍依赖内容撑高；视频在Grid中易拉伸塌陷，aspect-ratio兼容性差且无法与padding-top共存；安全方案是用position:relative+padding-top的独立容器包裹视频，并确保Grid仅负责布局定位。
- 文章 · 前端 | 3星期前 | 469浏览 收藏
-
- CSS变量兼容方案：PostCSS转换指南
- 老版本浏览器静默忽略CSS变量，PostCSS需配置customProperties({preserve:true})并配合postcss-preset-env开启customProperties，避免calc()嵌套var()，局部变量需提至:root或改用Sass。
- 文章 · 前端 | 3星期前 | 469浏览 收藏
-
- CSS容器查询报错怎么解决？旧版浏览器用Polyfill修复
- containerqueries在旧版浏览器中不报错而是静默忽略，Chrome110+、Firefox113+、Safari16.4+才原生支持，Safari16.4需加-webkit-前缀，@supports检测必须用(container-type:inline-size)。
- 文章 · 前端 | 3星期前 | 469浏览 收藏
-
- CSSSticky定位难控？简化DOM更高效
- sticky失效主因是父级样式干扰而非DOM层级过深，关键在于overflow非visible、固定height或flex/grid容器未触发滚动上下文，需用DevTools逐层检查计算值并针对性修复。
- 文章 · 前端 | 3星期前 | 469浏览 收藏
-
- 修复margin-top导致父元素下移，添加透明边框方法
- 加border-top:1pxsolidtransparent能打断margin塌陷，因其在父子间创建非空边界，满足CSS规范中“存在border/padding/content即阻断合并”的条件，且视觉无影响、兼容性好。
- 文章 · 前端 | 4星期前 | 469浏览 收藏
-
说明：http-equiv="X-UA-Compatible"：告诉浏览器这是一个兼">
说明：http-equiv="X-UA-Compatible"：告诉浏览器这是一个兼">
- 说明：http-equiv="X-UA-Compatible"：告诉浏览器这是一个兼">在HTML中，可以通过 标签的 http-equiv 属性来指定 Internet Explorer (IE) 的渲染模式。这是为了确保网页在不同版本的 IE 浏览器中以一致的方式显示。语法如下：说明：http-equiv="X-UA-Compatible"：告诉浏览器这是一个兼
- X-UA-Compatible仅用于IE存量系统维护，必须置于<head>最开头（无任何前置内容），否则IE直接忽略；推荐值为IE=edge，优先使用HTTPHeader方式发送。
- 文章 · 前端 | 1个月前 | 469浏览 收藏
-
- 链接HTML文件的实用技巧【指南】
- 正确使用标签需注意路径、target属性、锚点及SPA适配：相对路径以当前文件为起点，绝对路径以/开头；新开标签页须加rel="noopenernoreferrer"；锚点id需严格匹配且URL编码中文；SPA中优先用路由API。
- 文章 · 前端 | 1个月前 | 469浏览 收藏
-
- HTML中使用SVG的preserveAspectRatio属性可以控制SVG内容在视口中的对齐方式和缩放行为。这个属性决定了当SVG的视口（viewBox）与实际显示尺寸不匹配时，如何调整内容的位置和比例。1. preserveAspectRatio 属性简介preserveAspectRatio 是一个用于 SVG 元素的属性，它控制的是 SVG 内容如何适应其容器或视口（viewBox）。该
- preserveAspectRatio不设置宽高比，而是控制viewBox内容在容器中的缩放与对齐方式；其值由align（如xMidYMid）和meetOrSlice（meet默认完整显示，slice填满裁切）组成。
- 文章 · 前端 | 1个月前 | 469浏览 收藏
-
- 按量异步注入埋点，节省初始带宽方法
- 动态导入埋点逻辑可减小首屏体积，通过封装独立模块、按需调用import()、缓存Promise、配合代码分割与预加载策略实现解耦与优化。
- 文章 · 前端 | 1个月前 | 469浏览 收藏
-
- Node.js 与浏览器 Event Loop 差异解析
- Node.js与浏览器EventLoop根本不同：浏览器按“宏任务→清空微任务→渲染”循环，而Node.js基于libuv分6阶段（timers、poll、check等），微任务仅在阶段切换前集中执行，且process.nextTick优先级高于Promise。
- 文章 · 前端 | 1个月前 | 469浏览 收藏
