-
原子CSS通过提供单一职责的工具类，直接在HTML中组合样式，提升开发效率与可维护性。它以功能优先取代语义化命名，避免传统CSS膨胀与组件库定制受限问题。借助Tailwind等框架的JIT编译和PurgeCSS，实现按需生成与体积优化。通过配置设计Token统一规范，结合IDE插件提升开发体验。在大型项目中，虽面临类名冗长、团队协作等挑战，但可通过组件封装、@apply复用、严格配置限制和CodeReview等策略应对，确保灵活性与规范性平衡。
-
答案是Map和Set在处理非字符串键、对象引用唯一性及大数据量去重时具有显著优势。它们支持任意类型键（Map）或元素（Set），基于引用比较实现高效去重（Set）和复杂关联存储（Map），内部采用哈希结构使查找、插入、删除操作平均时间复杂度为O(1)，远优于数组遍历的O(n)。尤其在大规模数据去重或需以对象为键的场景中，性能优势明显；而传统Object仅支持字符串/Symbol键且存在原型链干扰，Array去重效率低下。实际开发中，应根据唯一性需求、键类型、顺序要求、序列化需要及内存管理来选择：Set适用
-
通过设置transition属性结合:active伪类实现点击反馈，.my-button设置背景色、文字颜色及transition动画，:active状态时改变背景色、缩放比例或阴影，使按钮点击时产生颜色变深、轻微缩小或下沉效果，提升交互体验。
-
Tooltip组件通过data-tooltip属性为元素添加提示信息，使用JavaScript监听鼠标事件并动态创建、定位提示框。核心逻辑包括：利用getBoundingClientRect计算位置，确保提示框不越界，并通过append/remove控制显示与隐藏。支持多种元素且无需额外DOM嵌套，可扩展自定义位置、动画和富文本功能，轻量易集成。
-
line-height用于控制文本行间距，提升可读性。它设置行框高度，影响垂直排版：值过小致重叠，过大浪费空间。推荐使用无单位数值（如1.5），正文宜1.4~1.6，标题可用1.2~1.3。避免全局设过大值，慎用小于font-size的line-height以防截断。
-
跨域问题需通过CORS、反向代理等方案在安全与可用性间平衡。1.CORS通过设置Access-Control-Allow-Origin等响应头实现可控跨域，生产环境应避免通配符并校验Origin；2.反向代理如WebpackDevServer或Nginx将前端请求转发至后端，规避浏览器同源策略；3.JSONP因仅支持GET、无错误处理且易受XSS攻击，已不推荐使用；4.安全策略需结合Origin白名单、Token验证、SameSiteCookie属性及CSP防止CSRF和信息泄露。跨域本质是安全设计问题，
-
标签模板字面量是JavaScript中一种允许用函数处理模板字符串的语法，形式为tagFunctionstring${expr}``，其接收字符串片段数组和表达式值，可用于HTML转义、DSL构建、CSS-in-JS、国际化等场景。
-
使用relative和absolute定位构建菜单结构，通过z-index设置层级（一级1000、二级1001、三级1002+），避免堆叠上下文干扰，并用JavaScript控制显示，可稳定实现多层弹出菜单。
-
实现一个符合PromiseA+规范的Promise类，需定义pending、fulfilled、rejected三种不可逆状态，通过resolve和reject函数改变状态并执行对应回调；then方法返回新Promise实现链式调用，根据当前状态异步执行onFulfilled或onRejected，并将结果传入resolvePromise处理；resolvePromise函数递归解析返回值x，避免循环引用并正确处理thenable对象；最后补充resolve、reject、catch、finally等常用
-
响应式多媒体布局核心是让内容自适应容器，图片通过max-width:100%和height:auto实现等比缩放；2.高清显示需结合srcset和<picture>元素按设备加载合适资源；3.视频和iframe使用“宽高比盒子”技术，利用padding-bottom和绝对定位保持比例；4.object-fit用于控制图片填充模式，避免变形；5.Flexbox和Grid则提升复杂布局能力，实现自动换行、弹性伸缩与二维网格排列，确保多媒体在不同屏幕下视觉一致且美观。
-
多行文本省略号通过overflow:hidden;text-overflow:ellipsis;结合-webkit-box实现，关键为-webkit-line-clamp设置行数。
-
首先安装Node.js和DartSass，再在Atom中安装atom-sass等插件，配置文件结构与编译规则，通过插件或命令行监听实现.scss文件自动编译为CSS，并在HTML中引入生成的CSS文件，从而提升开发效率。
-
答案：:not(:has())组合可精准排除含特定子元素的容器，如选择无标题的section或隐藏空内容块，需注意浏览器兼容性及性能影响。
-
Grid容器设置position:relative后，其子元素可使用position:absolute脱离网格流精确定位，如角标叠加于卡片右上角，不影响其他项目排列，实现结构与装饰的分离。
-
模块联邦是Webpack5实现微前端的核心技术，允许应用在运行时动态共享模块。通过ModuleFederationPlugin配置远程应用暴露模块、宿主应用按需加载，实现独立部署与构建。其核心优势在于支持独立开发部署、减少重复打包、提升加载效率，适用于多团队协作的大型系统如中台或电商平台。关键在于合理配置shared依赖避免版本冲突。
