前端技术文章
-
- 伪类样式难维护？统一状态类与伪类规则来帮你
- 伪类样式难维护的根本原因是交互状态与视觉样式耦合，导致逻辑分散、复用困难；应改用显式状态类（如.is-hovered）集中管理状态，配合JS事件控制，并分层使用伪类与状态类。
- 文章 · 前端 | 1个月前 | 243浏览 收藏
-
- CSS图文混排技巧：float与margin控制图文布局
- 使用float和margin可实现图文混排。将img设置为float:left或right使文字环绕，通过margin调整间距，避免文字贴边；为防止布局错乱，需用clear:both清除浮动，推荐使用.container::after伪类清除，确保父容器高度正常，布局稳定。
- 文章 · 前端 | 1个月前 | 463浏览 收藏
-
- CSS如何用aspect-ratio保持图片比例
- 应给图片外层容器设置aspect-ratio，再配合object-fit控制显示；直接设在img上无效，因img是替换元素，该属性无法触发布局约束。
- 文章 · 前端 | 1个月前 | 132浏览 收藏
-
- JS正则校验URL协议域名解析方法
- 推荐优先使用原生URL构造函数校验和解析URL，它自动处理编码、IDN和标准化，比正则更健壮；正则仅适用于轻量初步校验或提取协议与域名，但无法准确分离根域名，精确场景应使用psl等专用库。
- 文章 · 前端 | 1个月前 | 292浏览 收藏
-
- CSS按钮组布局：Flexbox控制间距技巧
- 用gap属性在父容器设gap:8px可均匀分隔按钮；IE不支持则用margin-right和:not(:last-child)；按钮宽度不一用flex:1均分或flex:00auto保留内容宽；移动端需足够padding和min-height保障点击区域；响应式需flex-wrap:wrap配合flex-basis计算列宽。
- 文章 · 前端 | 1个月前 | 309浏览 收藏
-
- 判断元素内容是否溢出，可以通过比较 scrollHeight 和 clientHeight 的值来实现。以下是一个简单的方法和示例代码：✅ 原理说明element.scrollHeight：返回元素的总高度（包括不可见部分）。element.clientHeight：返回元素可见区域的高度（不包括滚动条、边框等）。如果 scrollHeight > clientHeight，说明内容发生了溢出。📌
- 当scrollHeight>clientHeight时，垂直方向发生内容溢出；因scrollHeight含不可见内容高度，clientHeight仅为可见区域高度（不含边框/滚动条），差值即被裁剪像素数。
- 文章 · 前端 | 1个月前 | 254浏览 收藏
-
- CSS弹性盒子容器高度随内容变化的解决方法
- 弹性盒子容器高度随内容变化是正常响应式特性，应使用min-height保底并允许自然撑开，配合flex-direction:column和gap等属性实现自适应布局。
- 文章 · 前端 | 1个月前 | 267浏览 收藏
-
- 浏览器兼容性与JavaScript跨平台开发指南
- 答案：JavaScript跨平台开发需解决浏览器兼容性问题，不同浏览器对语法、API和事件模型支持不一，尤其在旧版IE、Safari和移动端表现明显。应识别常见问题如ES6+特性、DOM方法、新API在老环境缺失，事件模型差异等；借助Babel转译、Webpack配合Polyfill补充缺失功能，通过Autoprefixer与Browserslist配置目标环境；运行时采用特性检测、添加polyfill、避免依赖特定行为，并注意Android旧版WebView差异；合理构建流程加运行时兜底可保障稳定运行。
- 文章 · 前端 | 1个月前 | 391浏览 收藏
-
- Modernizr检测浏览器特性方法详解
- Modernizr检测具体特性而非HTML5整体支持，需同步加载于其他脚本前，通过Modernizr对象属性或html类名使用结果，但部分检测项（如serviceworker、geolocation）仅表静态存在，不保证运行时可用，须结合实际API调用验证。
- 文章 · 前端 | 1个月前 | 308浏览 收藏
-
- Vite Sass全局变量注入教程
- additionalData不生效主因是后缀与配置不匹配，应统一用.scss后缀并配css.preprocessorOptions.scss；运行时换肤需借力CSS自定义属性与JS动态设置，而非依赖Sass编译期注入。
- 文章 · 前端 | 1个月前 | 256浏览 收藏
-
- 闭包详解与实战应用技巧
- 闭包是函数与其词法环境的组合，使函数可访问外部变量。它基于作用域链机制，如outerFunction内的innerFunction访问outerVar；应用于数据封装（createCounter）、模块创建（IIFE模块）、事件回调（handleClick）；可能因引用大型对象导致内存泄漏，需及时解除引用；与作用域链紧密相关，延长了变量生命周期；应避免过度使用，注意性能和调试，可用开发者工具、debugger或console.log调试闭包。
- 文章 · 前端 | 1个月前 | 闭包 191浏览 收藏
-
- HTML中使用CSS的font-weight属性可以控制文字的粗细程度。该属性接受多种值，包括关键字和数值，用于定义字体的粗细。1. 关键字值normal：默认值，表示正常粗细。bold：加粗。bolder：比父元素更粗。lighter：比父元素更细。示例：p { font-weight: bold; /* 文字加粗 */ }2. 数值值100 到 900 之间的整数，表示不同的粗细级别。数值
- 应使用数值写法（如900）替代bold，因数值更精准可控，可突破字体仅支持400/700的限制，实现更强加粗；但前提是字体文件必须包含对应字重，否则浏览器将降级显示。
- 文章 · 前端 | 1个月前 | 303浏览 收藏
-
- SVG矢量图如何实现高清无损显示
- 根本原因是浏览器对<img>加载的SVG进行光栅化处理而失去矢量特性；唯一可靠解法是内联SVG并配合viewBox与相对宽高实现原生缩放。
- 文章 · 前端 | 1个月前 | 148浏览 收藏
