-
本文介绍如何使用原生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。
-
本文详解如何通过监听Swiper的slideChangeTransitionStart事件，消除分页器（.swiper-pagination）背景色更新相对于幻灯片的视觉延迟，确保两者背景色严格同步变化。
-
background-size和background-position可精准控制背景图的缩放与定位。使用cover或contain能使图像适配容器，结合center、top等定位值可实现居中或特定偏移，常用于全屏背景、雪碧图和响应式设计，提升视觉表现与布局契合度。
-
rgba背景能绕过opacity继承问题，因为opacity作用于整个元素及其子元素渲染层，而rgba仅影响当前元素颜色的alpha通道，不改变子元素透明度。
-
WebGL卡顿主因常是假性高面数或渲染调度不当，需先验算真实三角面数、优化导出设置、分层加载、LOD切换及合理使用InstancedMesh。
-
border-box和content-box是box-sizing的两个值，决定宽高计算方式。content-box的宽高不含padding和border，总尺寸会增大；border-box的宽高包含padding和border，总尺寸固定。推荐全局设置*{box-sizing:border-box}以统一布局行为，便于控制尺寸，避免错位。可单独为元素设置content-box恢复默认。实际开发中建议全局使用border-box，利于响应式设计，调试时可通过开发者工具查看盒模型变化。
-
用transition属性可实现悬停颜色平滑变化，需在基础状态定义初始色与transition:color0.3sease，再在:hover中设目标色；避免用all、慎用delay，兼顾性能、响应性与可访问性。
-
在CSSGrid中，通过父网格与子网格的独立嵌套并结合gap属性可构建清晰响应式布局，其中嵌套容器需设置display:grid，父子级gap互不继承、各自生效，且可通过媒体查询实现局部响应式变化，避免使用margin模拟间距，合理运用box-sizing与调试样式以确保布局一致性与可维护性。
-
z-index不生效主因是元素未定位或父容器创建了新层叠上下文；需确保position为relative/absolute/fixed/sticky，且避免opacity<1、transform非none等触发隔离。
