-
Flex容器未占满屏幕宽度的主因是父元素未撑开或存在margin/padding干扰；应检查html/body默认样式、display类型（避免inline-flex）、文档流状态，并用width:100%;min-width:100vw;box-sizing:border-box确保满屏。
-
相对定位元素位移后仍占原文档流位置；其本质是先按正常流占位再基于原位置偏移，top/left等不引发重排，z-index受层叠上下文限制，absolute子元素以relative父元素为containingblock但不受其后续位移影响。
-
JavaScript数组方法可高效处理数据操作。1.改变原数组的方法如push、pop、unshift、shift和splice用于增删元素；2.不修改原数组的map、filter、forEach和slice适用于遍历与转换；3.find、findIndex、includes和indexOf用于查找与判断；4.reduce、some和every支持聚合操作，实现统计与条件检测。掌握这些方法能显著提升代码效率与可读性。
-
try...catch仅捕获同步运行时错误，如JSON.parse异常、TypeError和主动throw；对异步错误、语法错误、已处理Promise拒绝及全局未捕获错误无效，需配合.catch()、unhandledrejection和error事件。
-
答案：通过float:left实现菜单项水平排列，需清除浮动防止父容器塌陷，推荐用overflow:hidden处理，并优化样式如去除最后边框，尽管现代布局更倾向Flexbox。
-
Grunt中用grunt-contrib-sass编译Sass/SCSS（推荐DartSass），用grunt-contrib-cssmin压缩纯CSS，需显式注册串联任务如build:css，并注意配置sourceMap、compatibility、字符编码及插件顺序。
-
原型链是JavaScript实现继承的核心机制，通过对象的[[Prototype]]链接形成查找链。当访问对象属性时，若自身不存在，则沿原型链向上搜索直至null。每个构造函数的prototype属性为其实例的共同原型，实例通过__proto__指向它，从而实现属性和方法的共享。ES6的class语法是原型继承的语法糖，class使用extends实现继承，底层仍基于原型链，使代码更清晰但不改变继承本质。区分自身与继承属性可用hasOwnProperty()方法，该方法仅检测对象自身的属性，不包括原型链上
-
展开运算符...是运行时解构可迭代对象的真实操作，非语法糖；对非可迭代对象报错，仅浅拷贝，合并数组时跳过空位，传参有数量限制，解构中rest必须居末。
-
flatMap在JavaScript中就是map操作后紧跟flat(1)的结合体，能同时对数组元素进行映射并自动扁平化一层，使代码更简洁且意图更明确。1.它的核心优势在于语义清晰，直接表明“转换+扁平化”的意图；2.性能上优于map().flat()，因避免了中间数组的创建；3.适用于处理嵌套数据提取、生成多条记录、数据过滤与解析等场景；4.需注意它仅扁平化一层，无法处理深层嵌套；5.回调函数必须返回数组，否则非数组返回值会被包装成单元素数组导致潜在错误；6.this上下文需通过箭头函数或thisArg正
-
max-width是CSS媒体查询中用于设置最大屏幕宽度的条件，当视口宽度小于或等于指定值时应用对应样式，常用于响应式设计。例如@mediascreenand(max-width:768px)适用于平板及更小设备，结合断点（如480px、768px）可实现移动端优先的布局调整、字体优化、图片自适应等。配合viewport元标签和移动优先策略，使用max-width能有效提升多设备兼容性和用户体验。
-
mousedown时应通过getBoundingClientRect()计算鼠标相对元素左上角的偏移并存储；mousemove中用transform:translate()更新位置并启用GPU加速；mouseup和mouseleave需绑定document以防事件丢失；移动端需兼容touch事件，取touches[0]坐标并判断单点触控。
-
<p>最稳妥的样式隔离方案是用data-ui属性限定作用域，配合CSSModules或框架提供的CSS变量主题机制。优先通过data-属性前缀约束选择器、避免穿透式覆盖、禁用!important，并利用构建时哈希类名或自定义属性实现天然隔离与动态主题支持。</p>
-
<p>固定宽度与百分比宽度混合使用可实现兼顾稳定与灵活的响应式布局。典型结构为左侧固定宽度侧边栏（如200px），右侧主内容区使用calc(100%-200px)或flex:1自适应；需注意总宽不超100%，推荐box-sizing:border-box处理边距，结合calc()函数精确计算宽度，并在Flexbox中利用flex-basis配合媒体查询优化多屏适配。</p>
-
推荐使用LiveServer插件运行HTML文件，安装后右键“OpenwithLiveServer”即可在浏览器中实时预览，支持自动刷新；也可右键文件用系统浏览器直接打开（file://协议），适合临时查看；还可通过终端使用npxserve或npxhttp-server启动本地服务器预览，更贴近真实部署环境。
-
JavaScript操作浏览器历史需谨慎使用window.history：pushState新增历史记录，replaceState替换当前记录；popstate仅响应API触发的导航，需手动处理首屏状态；back/forward/go易引发异常，应优先使用路由库；服务端须配置fallback，确保URL、历史栈、UI、服务端路径四者同步。
