-
flex-wrap:wrap在手机上没生效的主因是仅设display:flex而漏写flex-wrap，且子项不可收缩（如长单词、未设max-width的图片、min-width过大等），需同时设置flex-wrap:wrap、min-width:0、word-break:break-word及max-width:100%等协同生效。
-
用<optgroup>实现分组并控制默认选中：需用label属性定义分组，仅包裹<option>；默认选中可通过selected属性、select.value或selectedIndex设置，但须注意DOM渲染时机与浏览器兼容性差异。
-
Fixed定位工具栏遮挡内容时，应在body加padding-bottom等于工具栏高度；Flex布局需设width:100vw和flex控制子元素；iOS闪动可加transform:translateZ(0)；触控尺寸需min-height:48px并响应式适配。
-
JavaScript包管理通过npm或Yarn统一管理第三方库，依赖关系记录在package.json中，lock文件确保版本一致；npm是Node.js默认工具，Yarn强调速度与确定性；正确区分dependencies与devDependencies、不提交node_modules、定期清理依赖比工具选择更重要。
-
统一transition-timing-function可解决box-shadow跳变问题，需显式声明所有过渡属性并共用同一贝塞尔曲线；box-shadow必须写全四项数值且颜色统一用rgba()；必要时用transition-delay错开动画节奏或改用@keyframes精确控制。
-
HTMLmuted属性在移动端不生效是正常现象，因其本质是绕过音频策略实现自动播放而非控制音量，必须配合autoplay和playsinline使用，且需在用户手势中调用play()。
-
SCSS的transparentize()和opacify()是对颜色与黑/白按比例混合，非简单调整alpha；transparentize(#ff0000,0.2)等价于mix(#000000,#ff0000,20%)，结果为暗红色而非rgba(255,0,0,0.8)。
-
实现虚拟DOM库需三步：创建VNode、diff比较、patch更新。使用h函数创建描述DOM的JS对象，通过createElement将VNode转为真实DOM；数据变化时生成新VNode，与旧节点对比，利用diff算法找出差异，再通过updateElement递归更新子节点或替换元素，最小化操作真实DOM，提升性能。
-
Proxy是JavaScript中用于拦截并自定义对象基本操作的代理构造函数，需传入目标对象和配置处理器，支持get、set、has、ownKeys、apply等陷阱方法，广泛应用于响应式系统、数据验证与API封装，但仅代理对象第一层且有性能与限制约束。
-
currentColor是CSS关键字，代表元素自身的color计算值；它使SVG图标通过fill/stroke使用currentColor并配合color设置即可自动响应文字颜色变化，包括伪类、JS等动态场景。
-
图片容器必须设为position:relative，否则absolute遮罩层会脱离预期位置；遮罩层应使用rgba()设置背景透明度以避免文字发虚；尺寸需设为top:0;left:0;width:100%;height:100%或inset:0确保铺满；图片用display:block和object-fit:cover优化显示。
-
HTML5中绘制直线分隔内容块有五种方法：一、用<hr>标签语义化分隔；二、用CSSborder属性在块级元素上绘制；三、用伪元素::before/::after添加装饰线；四、用SVG<line>实现精确坐标控制；五、用linear-gradient背景创建多样式线条。
-
模板字符串用反引号包裹，天然支持多行、内嵌变量、保留原始格式，并支持标签函数。如第一行第二行、${name}、正则表达式及safeHtml<div>${userInput}</div>等。
-
WeakSet是仅存储对象且不阻止垃圾回收的集合，具有弱引用特性，只提供add、delete、has方法，适用于私有状态标记和避免内存泄漏，不可用于缓存或遍历。
-
答案：ReactHook规则要求只能在函数组件顶层和自定义Hook中调用Hook，确保每次渲染调用顺序一致，避免状态错乱和副作用异常，这些规则是React依赖调用顺序管理状态的机制基础，违反会导致bug或错误，可通过自定义Hook抽象逻辑、正确设置依赖数组和使用eslint插件来规避问题。
