-
最常用组合是contain:layoutpaint，二者必须同时启用才能实现完整隔离；contain:content不含style，主题切换需显式添加；动态设置须在DOM插入前完成；contain:size与height:auto冲突，慎用；验证需通过Paintflashing等实际表现而非computedStyle。
-
Canvas在flex/grid中需用ResizeObserver同步width/height与clientWidth/clientHeight，并重置坐标系或缩放ctx.scale()，否则内容拉伸模糊、点击失灵；CSS缩放须配image-rendering:pixelated防锯齿。
-
统一box-sizing:border-box、按语义选单位（rem/em/px/fr/%）、组件尺寸含padding/border、margin交由父级控制——这是CSS组件封装中避免尺寸失控的四大核心原则。
-
最安全写法是显式写<buttontype="button">，因浏览器默认type不一致易致意外提交；优先用<button>而非<inputtype="button">，因其支持HTML嵌套；需重置CSS并规范JS绑定。
-
能，但须符合语义且仅用于东亚文字注音；需ruby+rt+rp结构，主流浏览器支持良好，IE≤10不支持；禁用于英文缩写等非注音场景。
-
PWA本身无需原生APP，仅依赖Web技术栈；误解源于绕过应用商店、调用受限API或企业内部分发等场景；蓝牙、后台音频、深度通知跳转及厂商API仍需原生介入；WebView加载PWA需注意安全配置与serviceworker启用。
-
transform-style:preserve-3d失效主因是父容器未设非nonetransform（如translateZ(0)）或被overflow:hidden/filter等中断3D上下文，必须逐层确保preserve-3d+有效transform共存且无降级属性。
-
答案：实现侧边栏布局有四种常用方法。1.使用float实现，兼容性好但需清除浮动；2.使用flexbox，现代推荐方式，灵活易控；3.使用CSSGrid，适合复杂二维布局；4.固定侧边栏，适用于后台管理界面。其中flexbox因简洁高效、适配性强被广泛推荐。
-
disableRemotePlayback是HTML媒体元素的布尔属性，用于隐藏iOSSafari中视频右上角的AirPlay按钮，禁用远程播放控件；它自iOS14.5起稳定支持，仅作用于<video>和<audio>标签，不阻止系统级屏幕镜像。
-
BEM通过命名约定（block__element--modifier）实现样式隔离，不依赖构建工具，避免全局污染；CSSModules依赖哈希类名，在SSR、动态DOM、第三方组件中易失效。
-
watchEffect默认不处理竞态，需通过AbortController取消旧请求、isActive标记防抖或useDebounce前置降频来解决；避免直接在其中写async逻辑。
-
涟漪效果的核心原理是用JS获取点击坐标并动态设置CSS变量，使::after伪元素圆心精准落在点击处，再通过transform:scale()动画实现扩散。纯CSS无法读取坐标，故必须结合JS计算偏移量、监听click事件、设置--x/--y变量，并配合relative定位、border-radius:50%及cubic-bezier过渡。
-
HTML选区本质是DOM边界而非字符串，由anchorNode/focusNode及对应偏移量定义；selection.toString()会丢失结构和语义，应优先用getRangeAt(0)?.toString().trim()且需校验rangeCount>0。
-
推荐使用原生适配AppleSilicon的VSCode、WebStormforAppleSilicon、HTMLViewerPro+、Universal版HTMLEditor及SafariWebInspector进行HTML开发，以避免Rosetta2转译导致的卡顿、闪退等问题。
-
BEM通过强制单类名选择器将CSS权重恒定为0-1-0，天然规避!important滥用和嵌套爆炸；其核心是命名隔离而非权重优化，确保样式作用域清晰、协作边界明确。
