作用域链在函数创建时就确定了，通过[[Environment]]静态绑定外层词法环境；with和非严格eval会动态插入环境；闭包捕获整个词法环境而非变量值；模块、函数、块级作用域对应不同环境类型。

sticky失效主因是父容器设了overflow；2.sticky需在无overflow限制的滚动上下文中工作；3.解决法包括移除父级overflow或调整DOM结构；4.确保sticky元素脱离overflow容器以贴住视口。

Stylelint能解决CSS语法错误、风格不统一等问题，通过配置规则实现团队代码规范。它可检查无效属性、统一缩进与单位、规范命名，并集成到开发流程中，提升代码质量与团队协作效率。

JavaScript提取图片颜色的核心方法是利用CanvasAPI，具体步骤为：1.加载图片并确保其完全加载；2.创建与图片尺寸一致的Canvas元素；3.使用CanvasRenderingContext2D将图片绘制到Canvas上；4.通过getImageData()获取像素RGBA数据；5.遍历像素数据，统计颜色频率或应用聚类算法（如K-means）分析主色调；6.可通过采样优化性能。技术挑战包括跨域问题（CORS）、大图性能消耗、颜色感知差异处理等，可借助ColorThief.js或Vibrant

可通过navigator对象获取浏览器语言、设备类型、平台信息、地理定位和媒体设备支持：navigator.language/languages返回语言代码；userAgent判断移动设备；platform返回操作系统；geolocation检测定位支持；mediaDevices检查媒体访问能力。

使用::before和::after伪元素可在不改动HTML的情况下为表单添加视觉提示；2.通过position:relative与absolute结合content属性定位并显示图标；3.利用颜色如#d32f2f表示错误、#388e3c表示成功强化反馈；4.结合JavaScript动态添加类名控制样式显示，实现邮箱验证等场景的实时提示效果。

CSS变量、模块化文件、utility-first和scoped样式可减少重复；需按语义命名、区分作用域、合理抽象，避免过度统一或隔离。

CSS不能选择父元素因浏览器渲染机制限制，反向查找影响性能；可通过:has()伪类、结构调整或JavaScript间接实现。

可通过移除icon标签、设href为空或dataURL、配置HTTP响应头禁用请求、或使用1×1透明PNG图标四种方法隐藏HTML5页面图标。

border-width用于设置边框粗细，可接受1至4个值分别对应上右下左四边，也可单独设置某一边如border-top-width；必须配合border-style使用才能生效，常与border-color结合通过简写border属性统一设置，以实现精确的视觉控制。

新项目选CSS框架应聚焦“更省力、更可控、更可持续”：Bootstrap适合快速上线、前端不专精CSS的场景，提供预制组件；Tailwind适合需高度定制、有设计系统意识的项目，以原子类实现灵活主题控制。

根本原因是子项默认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(...)会丢失响应性并覆盖原引用，导致视图不更新。