-
min-height不能修复float导致的父元素塌陷，它仅设高度下限却不触发BFC或清除浮动，无法让父容器感知浮动子元素，背景、边框及后续布局仍会错乱。
-
本文详解在Flexbox布局中，如何确保嵌套的.parent和.item元素正确继承并占满.root的最小高度（如min-height:350px），重点解决因display层级缺失导致flex-grow失效的问题。
-
直接写vw或rem在CSS-in-JS中易出错，因库默认为数字值自动添加px单位；须显式传字符串（如"16vw"）或使用clamp()等原生方案确保单位生效。
-
答案：JavaScript与ARIA结合可提升Web无障碍访问。通过动态更新aria-expanded、aria-hidden等属性，配合focus管理与键盘导航，确保模态框、下拉菜单等组件对屏幕阅读器可用，避免冗余标注与状态不同步问题。
-
Flex布局下input和button高度不一致时，应统一box-sizing:border-box、显式设置line-height、移除button默认border/outline，并用flex:1让input占满剩余空间、align-items:stretch自动拉齐高度。
-
结论：需同时使用overscroll-behavior:none（body）与contain（滚动容器）+JavaScript补漏（iOS15以下），并确保fixed遮罩层内可滚动区域显式设overscroll-behavior:contain，避免滚动穿透。
-
必须用CSS变量存头部高度，因为JavaScript动态获取的offsetHeight会受缩放、字体加载、行高变化影响而波动，硬编码像素值易错位；CSS变量能将真实渲染高度同步给CSS，确保transform或margin-top精准抵消占位。
-
HTML选区本质是DOM边界而非字符串，由anchorNode/focusNode及对应偏移量定义；selection.toString()会丢失结构和语义，应优先用getRangeAt(0)?.toString().trim()且需校验rangeCount>0。
-
根本原因是container响应式定宽而container-fluid需父容器无宽度限制；Bootstrap5中其默认12px内边距导致不贴边，须用自定义CSS清除，且需排查viewport、全局样式及嵌套逻辑。
-
animation-iteration-count:infinite不生效的常见原因包括：未设置animation-duration、@keyframes缺少0%/100%或二者相同、animation-fill-mode未设为forwards/both、animation-play-state:paused或will-change导致异常，以及元素隐藏、JS重置动画或系统偏好reducesmotion。
-
@import在模块化项目中无法按需加载，因其是同步阻塞的原生CSS规则，不参与JS模块依赖图，Webpack/Vite默认不支持其条件加载或拆分，导致全量打包；推荐改用JS层动态importCSS、CSSModules配合提取插件或CSS-in-JS方案。
-
利用height或max-height配合overflow:hidden和transition，通过JavaScript控制类名切换实现导航菜单的平滑展开与收起动画效果。
-
navigator.clipboard.writeText()报“Permissiondenied”是因为未在用户手势（如点击）触发的HTTPS/localhost环境中执行，或iframe缺少相应sandbox和allow权限。
-
用padding-top控制视频宽高比是利用块级元素padding百分比基于宽度计算的特性，通过设置padding-top=(高度÷宽度)×100%（如16:9为56.25%）创建固定比例空白区域，再将video绝对定位其中并配合object-fit:cover和overflow:hidden，实现不变形、不拉伸、不溢出的响应式效果。
-
overflow:hidden失效的根本原因是Flex子项默认min-width:auto阻止收缩，需设min-width:0解除锁定，再配合width约束和text-overflow等才能生效。
