前端技术文章
-
pointer-events:none不生效的主因是父元素未生效或子元素显式设为auto覆盖；它使元素及后代不参与鼠标事件目标计算，但不影响键盘焦点与语义状态。206 收藏 -
overflow:auto在移动端不生效主因是容器无明确height/max-height，导致无法判定溢出；需配合max-height、min-height:0（Flex场景）、-webkit-overflow-scrolling:touch（iOS）及避免position:fixed干扰。155 收藏 -
样式不生效的三大主因是：link未放head内导致FOUC、href路径错误、rel="stylesheet"属性缺失或拼写错误；需确保link在head中且位于script前，路径正确，rel属性严格匹配，并配置服务器返回text/css响应头。313 收藏 -
float会让li的圆点/数字消失，因为list-style标记渲染在li的外边距区域，而浮动使li脱离文档流，导致该区域无法渲染；推荐改用display:flex或inline-block实现横排。132 收藏 -
通过容器包裹实现横向滚动，设置overflow-x:auto与max-width:100%防止布局溢出，结合-webkit-overflow-scrolling:touch提升iOS流畅度；利用::-webkit-scrollbar自定义滚动条样式，增强视觉美观；移动端可采用卡片布局切换与手势优化，辅以可访问性提示，确保响应式表格在各设备上兼具功能与体验。433 收藏 -
能，但需满足HTTPS协议（含localhost）和用户主动触发两个前提；调用前须检测支持性，失败需按error.code分类处理；watchPosition()依赖系统定位服务变化触发，非轮询；WebWorker中不可用。249 收藏 -
transition必须写在基础样式里，否则首次hover无动画；应避免all，优先用transform和opacity实现GPU加速；移动端需处理300ms点击延迟。170 收藏 -
CSS优先级由选择器权重(a,b,c,d)决定，逐位比较不加总；!important仅提升单条声明优先级，不改变选择器权重。230 收藏 -
应优先使用margin-inline而非margin-left/margin-right，当边距沿文本流方向（如按钮组、表单控件水平间距）且需自动适配LTR/RTL时；margin-block则用于块轴，其起始端由writing-mode决定而非direction，降级需用@supports+dirfallback。443 收藏 -
优先用position:sticky，它天然支持文档流、不脱离布局、兼容性足够；仅需兼容IE或强制视口钉死时才用fixed，并手动给body加padding-top避免遮挡内容。169 收藏 -
match()提取匹配内容返回数组或null，search()定位首个匹配位置返回索引或-1；前者关注“有哪些”，后者关注“在哪”，用途、返回值及标志支持均不同。175 收藏 -
fieldset+legend是唯一原生支持语义分组、禁用传播和屏幕阅读器正确播报的方案；div+h3等替代方式无法实现禁用继承、组名播报及表单API逻辑识别。201 收藏 -
能做，但外层必须设position:relative且有明确宽高（如width:300px或100%且父级有宽），否则内层absolute的width百分比无效；推荐width+background-color方案，兼顾兼容性与性能。107 收藏 -
JavaScript动画核心是requestAnimationFrame驱动、CSS控制视觉、数值插值决定中间态；因setTimeout/setInterval不同步刷新、无法暂停优化，易掉帧卡顿。103 收藏 -
loading="lazy"仅对初始HTML中存在且不在首屏视口内的<img>生效；动态渲染、overflow:hidden父容器、<source>标签、srcset/sizes配置错误或首屏关键图误用均会导致静默失效。256 收藏