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等触发隔离。

Grid容器需设position:relative，因absolute定位依赖最近已定位祖先，而grid容器默认static不构成定位上下文，否则子元素将相对于视口定位。

环境变量通过外部注入实现配置分离，提升安全性与可维护性；结合共享配置库和CI/CD自动化，可统一多项目配置，避免重复与不一致，实现高效治理。

掌握CSS盒模型是精准控制网页布局的关键，其由内容、内边距、边框和外边距组成；默认content-box模式下尺寸计算不含内边距和边框，易导致布局偏差；通过设置box-sizing:border-box可将这些部分纳入宽高计算，使布局更直观；推荐全局应用border-box以统一渲染行为；标准模型遵循W3C规范，而IE模型曾将内边距和边框包含在宽高中，需注意兼容性；使用DOCTYPE声明可确保标准模式解析；配合flexbox布局能进一步优化空间分配，弹性项目默认支持border-box特性，简化响应式设计

原生HTML下拉框不支持CSStransition，因其展开行为由系统控件控制；需用自定义组件模拟，通过max-height/opacity/transform实现过渡，并确保可访问性与表单语义。

WebGL通过JavaScriptAPI利用GPU在浏览器中渲染2D/3D图形，核心流程包括获取上下文、编写GLSL着色器、编译链接程序、传入顶点数据、设置矩阵变换并调用绘制命令；以立方体旋转为例，需定义顶点与索引、创建缓冲区、应用模型视图投影矩阵、启用深度测试并使用requestAnimationFrame实现动画；进阶优化涵盖光照、纹理、对象封装、计算缓存及FBO应用，掌握矩阵运算顺序与坐标系是提升关键。