前端技术文章
-
通过CSS的:hover伪类可以设置HTML超链接的鼠标悬停效果。具体步骤如下：1.定义超链接的正常状态，如链接颜色为蓝色。2.使用:hover伪类定义悬停状态，如链接颜色变为红色。3.可进一步添加背景颜色、阴影和动画效果，提升用户体验。264 收藏 -
HTML无法直接设置背景图片透明度，需用CSS多层背景叠加rgba色块或::before伪元素隔离图层；前者兼容性好，后者精准控制且不影响子元素。264 收藏 -
transform:rotate仅影响渲染层，不改变布局空间；包裹父容器可提供明确盒模型，配合调整margin、padding和transform-origin来对齐视觉与交互。264 收藏 -
writing-mode:vertical-rl是唯一语义化竖排方案，需配text-orientation:mixed使汉字直立、字母数字自动旋转；失效主因是父容器非块级、触发旧布局或未设高度；换行用white-space:normal或pre-line，line-height必须用无单位值。264 收藏 -
HTML5原生不支持RTSP，video标签无法直接播放rtsp://地址，因RTSP是控制协议且浏览器无内置解析器；帧率问题根源在后端转流参数、HLS切片设置或WebRTCSDP协商等环节。264 收藏 -
Array.from仅通过Symbol.iterator协议识别可迭代对象，不依赖类型或类数组结构；只要对象拥有返回合法迭代器的[Symbol.iterator]方法，即可转换为数组。264 收藏 -
原生getter哨兵通过被动拦截“幽灵对象”属性访问来精准捕获内存泄漏，而非监听值变化；它轻量、兼容性好、可追溯调用栈，适用于开发阶段快速定位闭包残留、事件未解绑等典型泄漏场景。264 收藏 -
Cookie的path属性通过前缀匹配限制作用范围，应显式加尾斜杠（如path=/admin/）避免路径误匹配；需配合domain、Secure、HttpOnly和SameSite使用才能保障安全。263 收藏 -
双击事件不会自动提升绑定优先级，ondblclick与onclick并列且默认均触发；需用计时器协调二者，避免干扰。263 收藏 -
::file-selector-button仅在type="file"的input直接子元素上生效，需设display:block/inline-flex；不可用display:none或visibility:hidden；Firefox117+才支持；仅支持有限样式属性，appearance:none须作用于input本身而非伪元素；点击区域由input尺寸和定位决定。263 收藏 -
1、使用debugger语句可在开发者工具中触发断点暂停执行；2、通过async/await与Promise实现异步延时等待；3、利用条件轮询模拟暂停逻辑；4、通过HTML层面控制脚本加载时机以达到暂停效果。263 收藏 -
requestAnimationFrame是实现流畅动画的推荐方式，它自动匹配屏幕刷新率、后台暂停、提供高精度时间戳，并需递归调用形成循环；而setInterval/timeout无法对齐刷新、易丢帧且不节电。263 收藏 -
用:checked伪类替代:hover可实现移动端可控的点击展开/收起菜单，需将checkbox与菜单置于共同父容器内、菜单设position:absolute且父容器设position:relative，配合max-height过渡动画，并完善可访问性。263 收藏 -
display:none是唯一真正移除渲染的方式，元素从渲染树中完全剔除、不占空间、不响应事件、JS查询尺寸为0，适合权限控制和条件渲染，但频繁切换会触发重排。263 收藏 -
padStart能补零是因为它专用于字符串左填充，但数字类型需先转字符串（如String(5).padStart(2,'0')），否则报错或语法错误；注意getMonth()需+1再补零。263 收藏