-
防抖是事件停止触发一段时间后执行一次，适合搜索输入等只关心最终结果的场景；节流是固定时间间隔最多执行一次，适合滚动监听等需稳定节奏的场景。
-
语义化标签需按内容角色而非样式选用：article用于可独立分发的内容单元，section用于同主题逻辑分组，aside用于非核心补充信息，nav专用于导航链接集合。
-
调大文字需同步调整line-height等依赖尺寸。优先用无单位line-height（如1.5）保持比例，配合rem/em设置margin/padding，表单元素需重设padding和height，并检查computed值继承链。
-
使用Flexbox制作数据时间轴效率高且弹性好，1.它通过flex-direction控制主轴方向实现垂直或水平布局；2.利用justify-content和align-items精准对齐元素；3.结合伪元素绘制时间轴线与圆点提升视觉效果；4.响应式设计依赖媒体查询调整布局方向与间距；5.复杂内容可通过嵌套Flex布局实现内部元素灵活排列。
-
JavaScript事件循环按“宏任务→清空微任务队列→下一宏任务”循环执行；setTimeout(0)不立即执行，因需等当前宏任务及所有微任务完成；Node.js有6阶段模型且含process.nextTick，浏览器则无。
-
本文介绍一种简洁、可复用的JavaScript方法，用于遍历任意<select>元素的所有<option>，将其value属性批量更新为对应textContent，从而避免手动维护不一致的值，适用于含多个表单的复杂页面。
-
通过CSS盒模型与媒体查询实现响应式布局；2.盒模型由content、padding、border、margin组成；3.推荐使用box-sizing:border-box；4.利用@media根据屏幕尺寸调整样式，适配不同设备。
-
fillRect()和strokeRect()是最直接的矩形绘制方法，分别用于绘制实心和空心矩形，需先获取2D上下文并设置fillStyle/strokeStyle；clearRect()仅将区域设为透明而非真正擦除；transform会影响矩形位置与尺寸，建议用save()/restore()隔离；批量绘制时应避免循环中频繁修改样式以提升性能。
-
Promise是代表异步操作状态的容器，具有pending/fulfilled/rejected三种不可逆状态；通过newPromise(executor)创建，用.then()/.catch()/.finally()处理结果，async/await是其语法糖。
-
CSS盒模型与position属性协同控制元素布局：盒模型由内容、内边距、边框和外边距组成，box-sizing决定尺寸计算方式；position的static、relative、absolute、fixed、sticky值改变元素定位行为，影响其在文档流中的位置与参照基准，结合使用可实现模态框居中、下拉菜单、悬浮按钮等复杂布局，关键在于理解“定位定参考点，盒模型定占地大小”。
-
XML在平板上显示异常的根本原因是浏览器用XML解析器渲染时无CSS样式、无视viewport且不响应式；正确做法是用HTML封装并用CSS控制容器元素。
-
align-items:stretch能让子元素垂直拉伸，但需父容器有明确高度且子元素未设置height、align-self等覆盖属性；否则因交叉轴无可用空间或样式冲突导致失效。
-
多列布局自动换行的本质是维持流式；float无法真正实现自动换行，仅靠手动清除或宽度匹配模拟，而Grid和Flexbox才能由浏览器动态计算并响应式换行。
-
过渡动画卡顿主因是避开重排重绘，需设≥200ms的transition-duration、仅过渡transform/opacity、用translateZ(0)开启硬件加速、避免transition:all及覆盖失效，并选用合适cubic-bezier缓动曲线。
-
初学者常因盒模型、浮动塌陷、margin重叠、z-index失效、优先级混乱和响应式适配等问题导致布局错误。通过浏览器开发者工具检查样式、使用边框定位、验证选择器匹配、清除浮动、重置默认样式、分步注释排查，并采用BEM命名和CSS变量，可高效调试与解决问题。
