-
根本原因是子项默认flex-shrink:1，解决方法是设flex-shrink:0或flex:00200px；flex-basis优先于width，需同时禁用收缩并设定基准尺寸，必要时检查父容器min-width和overflow约束。
-
对象冻结是使JavaScript对象不可修改的最严格防篡改方式，通过Object.freeze()实现浅冻结，需递归处理嵌套对象；另有seal、preventExtensions等防护等级较低的替代方案。
-
TreeShaking是构建工具利用ES6模块静态结构实现的代码优化技术，通过标记、剔除、压缩三步移除未使用代码。其生效依赖于静态import/export、无副作用声明、命名导出及正确配置如babel的modules:false和生产模式打包，确保仅保留运行时真正需要的代码，从而减小包体积。
-
Vue的ref创建的是响应式引用对象，必须通过.value属性赋值才能触发响应式更新；直接重新赋值variant=ref(...)会丢失响应性并覆盖原引用，导致视图不更新。
-
事件冒泡和捕获的本质区别是传播方向不同：捕获阶段从document向下传递至目标元素，冒泡阶段从目标元素向上传递回document；两者是浏览器固定执行的两个连续阶段，非互斥模式。
-
表单验证的核心是在提交前检查输入有效性并阻止无效提交，需通过ID或name获取元素、监听submit事件并preventDefault，结合正则实现邮箱、手机号等基础校验，辅以实时反馈和错误提示，且后端必须二次校验。
-
nav标签是HTML5用于定义页面主导航链接区域的语义化元素，提升可访问性和SEO；适用于主导航菜单、分页控件、面包屑等场景，不应滥用在页脚链接或普通内容链接中。
-
脱离文档流的absolute元素需父容器设relative作为定位参照，否则相对视口定位易错乱；relative保留占位仅视觉偏移，适合局部调整；transform更安全用于微调与居中。
-
Bootstrap通过.card类和网格系统快速构建响应式卡片，适合标准化项目；Tailwind则利用实用类组合实现高度定制化卡片布局，二者均需关注响应式设计、间距、阴影及图片适配，提升跨设备体验。
-
图片在flex容器中垂直错位因inline默认基线对齐，加vertical-align或设display:block可修复；响应式需用aspect-ratio或padding-top保比例；grid布局应约束图片容器高度并慎用align-self:stretch；统一box-sizing、用clamp控制padding、检查font-size对rem的影响。
-
负值margin可让元素视觉位移并影响周围布局，适用于对齐、重叠等场景，但不改变文档流位置；负padding非法，需用负margin或transform等替代；Grid/Flex中需谨慎使用，避免布局异常。
-
JSON.parse(JSON.stringify(obj))仅适用于纯数据对象，会丢失函数、undefined、Symbol、Date、RegExp等类型，且不支持循环引用；可靠替代方案包括structuredClone（现代环境）、Lodash的_.cloneDeep（兼容老环境）或自定义递归实现。
-
const声明必须初始化且不可重赋值，let允许后续赋值；两者均有TDZ；默认优先用const，仅需重赋值时用let；const锁定绑定而非值，let在闭包中提供独立块级绑定。
-
Symbol是JavaScript中用于生成唯一不可变值的原始类型，主要作为对象属性键避免命名冲突；每次Symbol()调用均返回不同值，描述字符串仅用于调试；支持全局注册表Symbol.for()和内置Symbol扩展语言行为。
-
HTML渲染异常需按浏览器流程调试：解析DOM/CSSOM→构建渲染树→布局→绘制；用DevTools检查结构、样式、重绘/图层；排查display/visibility、浮动塌陷、定位基准等问题；验证DOCTYPE与HTML合法性。
