-
用position:fixed实现悬浮客服框需将元素直接挂载到body下，设right:20px、bottom:20px和z-index:9999，避免祖先元素设置transform/filter创建新包含块，并注意iOS地址栏变化及微信X5内核的z-index兼容性问题。
-
使用rem单位结合媒体查询可解决多设备字体不一致问题：rem相对于根元素字体大小，通过媒体查询动态调整html的font-size，使文字等比缩放；配合vw单位可实现更平滑的响应式效果，推荐设定清晰断点并统一项目字体单位，确保各屏幕下显示协调。
-
TailwindCSS通过预设类名快速设置间距和字体大小，提升开发效率。①使用mt-4、py-2等类控制外边距和内边距，基于4px增量确保视觉一致；②用text-lg、font-semibold等类设定字体大小与字重，支持响应式断点；③组合p-4、mb-2等类实现无需自定义CSS的高效布局，样式逻辑集中于HTML，便于维护与协作。
-
根本原因是平板浏览器默认启用viewport缩放、采用不同字体尺寸与CSS像素逻辑，且缺乏hover等交互支持；需通过viewportmeta标签和针对性CSS适配。
-
用CSS框架统一图表样式需通过类名约定与自定义属性实现：为容器设统一类（如chart-container）并用修饰符（--primary、--dark）定义主题变量；借助工具类控制尺寸留白；JS中读取CSS变量动态配色，避免硬编码。
-
外部CSS在维护性、复用性、协作和性能上优于内联样式。1.维护成本低，修改一处全局生效；2.支持类选择器实现样式复用；3.分离结构与表现，利于团队协作；4.可被浏览器缓存，提升加载效率。
-
transition-duration控制过渡持续时间，transition-delay设置延迟；两者配合可精细调控动画节奏。例如，.box{transition-duration:0.5s}表示过渡持续0.5秒，.btn{transition-delay:0.2s}表示延迟0.2秒启动。支持多属性分别设置时间与延迟，推荐使用简写transition一次性定义所有参数，如.card{transition:all0.4s0.1sease-in-out}，提升开发效率与动画流畅性。
-
JavaScript隐式类型转换发生在==、&&、||、!、if、while及+等场景，按抽象操作规则自动转换类型；==触发抽象相等算法并转换类型，===则严格比较类型与值，不转换。
-
本文介绍如何使用原生JavaScript的事件委托机制，精准删除触发事件的按钮所在父元素，避免ID冲突与重复绑定问题，同时支持动态添加的元素。
-
代理模式通过Proxy拦截对象操作实现验证逻辑，如限制年龄为正数、表单字段校验，并可封装通用验证函数，提升代码复用性与可维护性。
-
input[type="text"]比.form-input更易维护，因其按控件类型分层处理，避免checkbox拉宽、number箭头残留等问题；属性选择器需注意大小写敏感、引号规范及hidden类型排除。
-
外边距叠加指垂直相邻元素的外边距合并为较大值，常见于块级元素间。可通过添加边框、使用BFC、统一设置margin-bottom等方式避免布局错乱。
-
使用LiveServer插件可实现在VSCode中运行HTML文件，安装后右键选择“OpenwithLiveServer”即可启动本地服务器并自动在浏览器中预览，支持保存后自动刷新；也可通过右键文件“在资源管理器中显示”后手动用浏览器打开，适合快速查看静态页面；还可安装OpeninBrowser插件实现一键在默认浏览器中预览。
-
JavaScript事件流分捕获、目标、冒泡三阶段；addEventListener第三参数决定监听阶段（true为捕获，false或省略为冒泡）；stopPropagation可阻止后续传播，事件委托依赖冒泡实现。
-
::first-letter设置font-size后行高错乱的根本原因是其伪元素以inline方式参与布局并继承父line-height，放大首字母后浏览器按替换元素规则重算行高基线，导致整行视觉偏移；需同时设置line-height:1和vertical-align（如text-top）并慎用display:block。
