前端技术文章
-
- 视频封面设置技巧：poster属性与占位图方法
- video的poster属性必须为可访问的http/https网络URL，不支持本地路径；需配合preload="metadata"和有效src才能显示；播放结束后需手动监听ended事件恢复封面。
- 文章 · 前端 | 1个月前 | 485浏览 收藏
-
- HTML快速复制技巧分享
- 可通过五种方法复制HTML或文本：一、开发者工具复制outerHTML/innerHTML；二、控制台解除选择限制；三、使用浏览器扩展；四、控制台执行querySelector+clipboard.writeText；五、保存网页后编辑提取。
- 文章 · 前端 | 1个月前 | 485浏览 收藏
-
- CSS绝对定位制作装饰圆点教学
- 用absolute定位圆点时父容器必须设position:relative，否则圆点会相对于body定位；border-radius:50%要求宽高相等才能成圆；微调位置优先用top/right等四方向偏移而非transform；多圆点推荐用box-shadow实现光晕或双环效果，便于主题色统一维护。
- 文章 · 前端 | 1个月前 | 485浏览 收藏
-
- CSS为什么Text-align-last末行对齐在Safari不生效_通过伪元素After模拟空格占位
- <p>text-align-last在Safari中完全不支持：所有版本均未实现，加-webkit-前缀也无效，浏览器静默忽略该属性；可用::after伪元素配合text-align:justify模拟末行对齐，但存在单行误换行、固定高度裁切、连字符干扰等限制。</p>
- 文章 · 前端 | 1个月前 | 485浏览 收藏
-
- CSS如何实现容器响应式宽度_利用max-width与百分比结合
- 用max-width配合width:100%是控制容器响应式宽度最稳妥的方式，比单纯用width:100%或width:100vw更可靠，尤其在嵌套、缩放、滚动条场景下不容易溢出或错位。
- 文章 · 前端 | 1个月前 | 485浏览 收藏
-
- CSS实心圆点制作教程
- 用width和height相等+border-radius:50%能画出圆，但“完美对齐”需同步处理vertical-align、display、line-height及字体度量；根本原因是inline元素按baseline对齐，导致圆点视觉下沉。
- 文章 · 前端 | 1个月前 | 485浏览 收藏
-
- HTML实现左右分栏拖拽调整大小方法
- 最简实现左右分栏拖拽需用resize:horizontal+overflow:hidden+display:flex，左栏设min-width、flex-shrink:0，右栏flex:1；需ResizeObserver监听左栏尺寸变化，用contentRect.width获取准确宽度。
- 文章 · 前端 | 1个月前 | 485浏览 收藏
-
- 浮动侧边栏等高技巧：底色伪装与边框拉伸方法
- BFC是解决浮动侧边栏高度不一致导致底色断层的标准解法，推荐overflow:hidden触发；底色伪装和边框拉伸属临时补救，本质未解决问题；现代布局应优先选用Flex或Grid。
- 文章 · 前端 | 1个月前 | 485浏览 收藏
-
- CSSGrid子元素高度控制技巧
- Grid子项默认不继承父容器高度，需通过grid-template-rows（如1fr）定义行轨道高度，align-self:stretch仅在子项无显式高度且轨道尺寸确定时生效。
- 文章 · 前端 | 1个月前 | 485浏览 收藏
-
- 动态数字滚动效果实现方法
- 纯CSS无法实现数字动态滚动，必须用JavaScript配合requestAnimationFrame控制数值演进，结合IntersectionObserver触发及正则提取纯数字，确保平滑、精准、低开销。
- 文章 · 前端 | 1个月前 | 485浏览 收藏
