-
标准盒模型中width不包含padding和border，导致布局易溢出；通过box-sizing:border-box可使width包含padding和border，结合百分比、vw、rem等相对单位及媒体查询，能实现跨设备兼容的响应式布局。
-
应使用浏览器打开HTML文件并检查扩展名和编码：一、右键选择浏览器打开；二、在浏览器地址栏输入file:///路径访问；三、显示并确认扩展名为.html；四、确保文件含<!DOCTYPEhtml>且保存为UTF-8无BOM；五、在系统默认应用中将.html关联至浏览器。
-
应使用rgba()或hsla()设置背景色透明度，而非opacity；rgba(0,0,0,0.5)使背景半透明而文字保持不透明，且兼容性处理可添加十六进制fallback。
-
定义全局函数需挂载到全局对象，浏览器中为window，Node.js中为global；2.可在全局作用域声明、通过window或global显式赋值，或隐式创建（不推荐）；3.全局函数可在任意位置调用，跨文件共享；4.应减少全局污染，推荐模块化封装。
-
本文介绍使用DocumentFragment和insertAdjacentHTML在不插入冗余容器元素的前提下，向现有<ul>动态追加多个<li>节点的两种专业方案。
-
padding在行内元素上并非无效，而是垂直方向被行高和行框限制，水平方向仍可见；常用display:inline-block解决，兼顾文档流与完整padding生效。
-
for循环在大多数场景下比forEach快2–5倍，尤其数组长度超1000时更明显；因forEach每次迭代创建新函数作用域、隐式调用回调且无法用break中断，而for是原生指令级控制。
-
map、filter、reduce的核心区别在于结果类型：map生成等长新数组，filter返回子集数组，reduce得到单个聚合值；正确选择取决于最终需要的数据形态。
-
align-items控制网格项在单元格内的垂直对齐，如center居中、stretch拉伸；align-content管理多行轨道间的整体分布，如space-between两端对齐、center居中排列；两者结合可实现精确布局控制。
-
CSS动画播放速度由animation-duration直接控制，值越小越快；JavaScript可通过element.style.animationDuration动态修改实现运行中变速，但仅限内联样式且不支持IE；WebAnimationsAPI的playbackRate支持真倍速但仅适用于JS创建的动画。
-
实现符合PromiseA+规范的Promise库需正确处理状态机、异步解析与then链式调用，核心包括：1.定义pending、fulfilled、rejected三种不可逆状态；2.构造函数中通过resolve/reject控制状态变更并维护回调队列；3.then方法返回新Promise，确保异步执行与错误捕获；4.实现resolvePromise函数处理返回值x，递归解析thenable对象并防止循环引用。严格遵循规范可确保兼容性，建议使用promises-aplus-tests验证。
-
原型链是属性查找时的向上委托机制：先查对象自身，再沿__proto__逐级向上，直至null；构造函数的prototype指定实例原型，__proto__指向其原型；继承即让子类prototype链接父类原型。
-
表单元素错位主因是float脱离文档流与表单默认行为叠加；解决需控制对齐、清除浮动、统一基线；推荐用inline-block或flexbox替代float，兼顾兼容性与可维护性。
-
:checked+label动画失效或卡顿的根本原因是transition仅对可动画且连续变化的属性生效，而该选择器本身不改变样式，需确保规则中修改的是opacity、transform等支持插值的属性，并避免display、height:auto、transition:all等陷阱。
-
height:0到height:auto无法直接过渡，因CSStransition需明确数值而auto是运行时计算值；常用max-height替代，设足够大的固定值并配合overflow:hidden；JS方案用scrollHeight动态获取真实高度；Chromium114+支持@starting-style实现原生height过渡但兼容性有限。
