-
浮动导致父容器高度塌陷因父容器忽略浮动子元素高度；解决方法依次为：overflow:hidden触发BFC、display:flow-root（现代首选）、伪元素::after清除；clear:both须作用于浮动后的兄弟元素而非父容器；Flex/Grid布局下float失效，无需清除。
-
class冲突难排查是因为CSS全局作用域导致同名类被覆盖且无报错；BEM通过命名隔离作用域，禁止跨Block复用；渐进式落地需新功能强制BEM、老模块加scope隔离；须警惕过度嵌套与语义膨胀。
-
发布订阅模式通过事件总线实现松耦合通信，核心方法为on、emit、off；适用于跨组件通信、异步解耦、插件扩展等场景，并需注意通配符、once、错误隔离及类型安全。
-
行内非替换元素的margin-top和margin-bottom无效是CSS规范约定，因其在行内格式化上下文中无垂直布局空间；左右margin可生效，上下padding不影响行高；替换元素（如img）则支持完整外边距。
-
CSS的overflow属性用于控制容器内容溢出时的显示方式，包括hidden（裁剪）、auto（按需滚动）和scroll（强制滚动条），需配合尺寸设置与盒模型使用。
-
JavaScript是让网页交互动态化的编程语言，运行于浏览器和Node.js，可响应操作、更新内容、通信服务器、控制样式；零基础可从待办清单项目入手，用记事本+浏览器即可实践。
-
使用gap与flex属性可高效实现响应式工具栏布局。首先将容器设为display:flex并设置gap，如.toolbar{display:flex;gap:8px;}，使按钮间保持统一间距且不影响容器边缘；结合flex:1让特定元素（如搜索框）占满剩余空间，flex:none保持按钮固有尺寸；垂直布局时使用flex-direction:column，gap仍生效，确保清晰结构；相比margin，gap避免外边距合并问题，提升布局整洁性与灵活性，现代浏览器支持良好，仅需注意IE不兼容。
-
答案是使用CSS的background-image配合媒体查询和现代图片格式来适配高分辨率屏幕。通过为不同设备像素比提供对应图片，如使用@media查询检测-device-pixel-ratio或使用image-set()函数，可让Retina屏加载2x或3x图，保证清晰度，同时用WebP、AVIF等高效格式压缩图片，在保证视觉质量前提下减少文件大小，兼顾加载性能与显示效果。
-
在HTML5中应直接监听鼠标事件并从event对象获取clientX/clientY，其值相对于视口左上角且不随滚动变化；需换算为元素坐标时用getBoundingClientRect()，文档坐标则用pageX/pageY；touch事件须从touches[0]取值。
-
用Tailwind更优，因其支持PurgeCSS精准剔除未用样式；Bootstrap需手动引入SCSS子模块或第三方插件压缩；Bulma/Foundation因嵌套选择器、无ESM、不可按需提取而拖慢首屏；CSS-in-JS有运行时开销，应慎用于高频交互场景。
-
答案：JavaScript的Proxy机制可非侵入式地为网络请求添加自动重试功能，通过代理拦截函数调用，在不修改原逻辑的前提下实现错误重试、指数退避与错误过滤，提升系统韧性与用户体验。
-
小屏交互问题需确保触控区域≥44px、禁用float干扰flex、字号调至18px并设line-height≥1.5、按钮间距≥8px。
-
模板字符串是解决变量拼接、换行和表达式嵌入问题的ES6+工具，用反引号包裹、${}插入表达式，不支持IE，禁用语句与HTML自动转义。
-
答案：CSSGrid与媒体查询结合可实现响应式布局，通过断点调整网格结构和元素排列，适配多设备显示需求。
-
事件监听器必须用相同函数引用和options才能精准移除，匿名函数无法清除；{once:true}自动卸载；推荐用AbortController统一管理批量监听器。
