-
应优先使用margin-inline而非margin-left/margin-right,当边距沿文本流方向(如按钮组、表单控件水平间距)且需自动适配LTR/RTL时;margin-block则用于块轴,其起始端由writing-mode决定而非direction,降级需用@supports+dirfallback。
-
优先用position:sticky,它天然支持文档流、不脱离布局、兼容性足够;仅需兼容IE或强制视口钉死时才用fixed,并手动给body加padding-top避免遮挡内容。
-
match()提取匹配内容返回数组或null,search()定位首个匹配位置返回索引或-1;前者关注“有哪些”,后者关注“在哪”,用途、返回值及标志支持均不同。
-
fieldset+legend是唯一原生支持语义分组、禁用传播和屏幕阅读器正确播报的方案;div+h3等替代方式无法实现禁用继承、组名播报及表单API逻辑识别。
-
能做,但外层必须设position:relative且有明确宽高(如width:300px或100%且父级有宽),否则内层absolute的width百分比无效;推荐width+background-color方案,兼顾兼容性与性能。
-
JavaScript动画核心是requestAnimationFrame驱动、CSS控制视觉、数值插值决定中间态;因setTimeout/setInterval不同步刷新、无法暂停优化,易掉帧卡顿。
-
loading="lazy"仅对初始HTML中存在且不在首屏视口内的<img>生效;动态渲染、overflow:hidden父容器、<source>标签、srcset/sizes配置错误或首屏关键图误用均会导致静默失效。
-
根本原因是父容器宽度被超宽子元素撑开,overflow:hidden仅隐藏溢出内容而不约束布局宽度;须同时触发BFC并限制子元素横向扩张(如max-width:100%、overflow-wrap:break-word)。
-
流式排版系统核心是线性内插而非clamp(),因后者仅支持两值线性映射且无法参与Sass编译期运算;interpolate()函数需处理单位一致、边界截断及无单位转换以适配Sassy-Gridlover等工具。
-
:last-child在多列布局中失效,因其匹配父容器最后一个子元素而非每行末尾;应改用:nth-child(3n)清除每行最右列右边距,或Grid的gap属性、Flex的justify-content等更可靠方案。
-
轮播图自动播放停不下来是因为未保存定时器ID,需用变量存储并清除;requestAnimationFrame比setTimeout更平滑;避免display:none导致闪屏;移动端滑动需精准阻止默认行为。
-
HTML5无需安装,浏览器卡顿源于video/audio标签的性能问题;应合理设置preload属性、确保H.264+AAC编码兼容、避免无交互autoplay、改用requestVideoFrameCallback优化监控。
-
真正提升SEO和可访问性的语义标签极少,仅<nav>、<main>、<header>、<footer>、<article>、<time>等少数被搜索引擎和屏幕阅读器实质性识别;滥用如无标题的<section>或误用<article>反而破坏结构。
-
Less中需用Mixin统一配置word-break和overflow-wrap:先写overflow-wrap:break-word,再加word-break:break-word兜底旧版Chrome,IE11需显式声明word-wrap:break-word;父容器必须设width/max-width才生效。
-
答案:使用Flexbox居中需根据主轴方向正确设置align-items和justify-content。当flex-direction为row时,justify-content控制水平居中,align-items控制垂直居中;改为column时,主轴变为垂直方向,justify-content控制垂直居中,align-items控制水平居中,通过调整两属性可实现任意居中布局。