-
优先用display:flow-root触发BFC清除浮动，语义清晰副作用小；兼容IE8则用::after伪元素清除；clear:both仅对紧跟浮动后的块级盒生效，遇flex/grid或inline元素即失效。
-
在HTML中引入CSS的方法有四种：内联样式、内嵌样式、外部样式表和导入样式。1.内联样式适合临时调整，但会使代码冗长且无法缓存。2.内嵌样式适用于小型项目，但无法缓存且可能影响加载速度。3.外部样式表是最常用和推荐的方法，适合大型项目，但需额外HTTP请求。4.导入样式适合将CSS分模块，但会增加HTTP请求并影响性能。
-
CSSGrid可高效拼接群聊头像：通过grid-template-areas精准定位，统一设border-radius:50%、object-fit:cover及overflow:hidden；按人数（2×2/3×3）和屏幕断点响应式布局，配合z-index层级控制右下角叠加，并用width/height属性防闪烁。
-
HTML5search输入框在旧浏览器中不被原生支持，需通过降级为text类型并添加ARIA属性、Modernizr检测动态替换、引入polyfill模拟行为、CSS重置样式及服务端统一参数映射五种方案实现兼容。
-
不能，绝大多数移动端浏览器已移除对::-webkit-scrollbar的支持，包括iOSSafari和AndroidChromev117+，因其在触屏场景下会干扰手指滑动体验。
-
HTML是网页骨架，CSS是其衣服；link必须放在head中以防闪白，@import性能差且易出错；选择器失效多因匹配失败、特异性冲突或路径错误。
-
用canvas+getImageData手动改色是唯一靠谱方式，需逐像素按通道加权重做非线性映射，才能实现胶片特有的高光/阴影分离、青橙对比、颗粒感与褪色偏移。
-
v-html直接渲染原始HTML易引发XSS，须谨慎使用；应优先用文本插值或组件替代，前端用DOMPurify净化，后端严格清洗，必要时转为JSONAST渲染。
-
IE10需用-ms-flexbox整套旧语法：display:-ms-flexbox、-ms-flex-pack、-ms-flex-direction等，不支持flex-wrap和三值-ms-flex，且属性值严格限定。
-
text-stroke不是标准属性，仅WebKit浏览器支持-webkit-text-stroke；Firefox需用8方向text-shadow模拟，且描边宽度应使用px并注意高倍屏适配。
-
JavaScript展开运算符（...）用于将可迭代对象（如数组、字符串、Set等）展开为独立元素，在函数调用中替代apply()，支持与普通参数混合使用，但必须位于实参列表末尾。
-
响应式浮动布局通过float与mediaqueries实现多设备适配：默认移动端堆叠（width:100%，float:none），平板（≥600px）两列（50%宽度，float:left），桌面（≥900px）三列（33.33%宽度，float:left），需用overflow:hidden或伪类清除浮动以防止父容器塌陷，结合百分比宽度和断点控制确保布局稳定。
-
<p>PostCSS是一个通过JavaScript转换CSS的工具，利用插件如Autoprefixer自动添加浏览器前缀；它基于AST解析，支持未来CSS特性、压缩格式化及错误检测；Autoprefixer依据CanIUse数据库和项目中browserslist配置的目标浏览器范围，自动为需兼容的属性添加-webkit-、-moz-等前缀；通过安装postcss和autoprefixer，创建postcss.config.js引入插件，并在package.json中设置browserslist
-
开启保存时自动格式化并选择Prettier为默认工具，可实现HTML代码自动对齐；通过设置“Editor:FormatOnSave”、安装Prettier扩展及配置规则如缩进和引号，确保代码整洁。
-
HTML<details>标签可实现基础折叠/展开，但IE全系不支持，Edge12–18无动画且toggle事件不可靠，旧版Safari（≤15.4）嵌套渲染异常；手动绑定onclick会破坏可访问性、键盘支持和事件监听，正确做法是监听toggle事件；max-height过渡需动态读取scrollHeight避免跳变；手风琴效果须JS管理open状态并防抖处理。
