-
等高列首选display:flex或display:grid；flex依赖align-items:stretch和父容器明确高度，grid适合固定列数布局；应避免float、table-cell等语义错误或兼容性差的旧方案。
-
选择合适的CSS框架和UI库可提升开发效率，通过CDN链接能快速在HTML中引入Bootstrap、TailwindCSS、Foundation等样式框架，以及MUI、UIKit等组件库；使用时需将CSS放入<head>、JS置于</body>前，注意CDN功能限制与加载性能，适合原型开发与小型项目。
-
在Firefox中，为新插入DOM的元素添加CSStransition时，单纯依赖setTimeout或requestAnimationFrame往往无法稳定触发动画；使用WebAnimationsAPI的element.animate()方法可绕过渲染时机问题，实现可靠、零延迟、跨浏览器兼容的过渡效果。
-
Bulma适合小项目，因其纯CSS、轻量（仅23KB）、响应式布局开箱即用、语义化类名直观易懂、支持Sass按需定制，无需JS框架即可快速上线。
-
CSS选择器需按匹配逻辑分层理解，核心是明确“选中范围”与“优先级来源”；应结合HTML结构选择元素、类、ID、属性、伪类等选择器，并区分后代、子代、兄弟关系。
-
Node.js是基于ChromeV8引擎的服务器端JavaScript运行时，移除浏览器API、提供fs/net等服务端API，通过node命令执行JS文件，采用global全局对象、CommonJS模块系统及非阻塞I/O事件驱动模型。
-
box-sizing:border-box应全局重置或作用于自定义容器而非个别元素，避免子元素仍用content-box导致尺寸失控；padding/margin禁用于占位对齐，优先用Flex/Grid和gap；border宜用outline或box-shadow替代以减少重排。
-
使用语义化标签如<header>、<nav>、<main>等替代<div>，合理嵌套、控制层级，配合BEM命名和统一代码格式，提升HTML可读性与维护性。
-
JavaScript采用解释+JIT混合执行模型，经词法分析、语法分析、字节码生成与热点编译；执行依赖上下文、作用域链、调用栈和事件循环协同，微任务优先于宏任务执行。
-
transition必须写在初始状态而非伪类中，且仅对可过渡属性（如color、transform）生效；不可过渡属性（如display、height:auto）需用max-height等替代；多处声明时后写覆盖前写。
-
JavaScript中函数分为普通函数和箭头函数：前者支持this动态绑定、arguments、new调用及Generator；后者继承外层this、无arguments和new.target、不可构造、不支持Generator。
-
TailwindCSS通过移动优先的响应式断点类实现移动端适配，提供sm、md、lg、xl、2xl五种默认断点，支持自定义配置；使用断点前缀如md:、lg:可针对不同屏幕尺寸调整样式，例如字体、布局、间距及元素显示，推荐先为小屏设置基础样式再逐层优化大屏体验，结合类名组合实现跨设备一致的响应式设计。
-
JavaScript函数是可复用代码块，用于封装任务、提升可读性与维护性；可通过函数声明、表达式或箭头函数定义，支持模块化、输入输出、回调、闭包等核心功能，合理使用遵循DRY原则与单一职责。
-
HTML5网页拼接有五种原生方法：一、iframe嵌入隔离内容；二、fetch+innerHTML动态注入；三、template元素预定义可复用结构；四、WebComponents封装自定义元素；五、Server-SentEvents流式拼接。
-
本文介绍使用事件委托（EventDelegation）解决动态创建的DOM元素无法响应hover事件的问题，确保所有新添加的.box元素都能正确触发mouseenter/mouseleave行为。
