-
应优先使用requestAnimationFrame替代setTimeout实现动画主循环，因其由浏览器统一调度、自动适配刷新率且页面不可见时暂停；CSS动画需优先使用transform和opacity属性以避免重排重绘，并通过@supports和特性检测实现兼容性降级。
-
backdrop-filter需显式声明transition才能渐变模糊，且仅Chrome/Edge102+、Safari15.4+支持，Firefox不支持；须单独为.modal-overlay设置transition:backdrop-filter0.3sease，否则硬切无动画。
-
auto-fill会创建尽可能多的列并保留空轨道，而auto-fit则让有内容的列拉伸填满容器；两者结合minmax()可实现无需媒体查询的响应式布局，适用于不同场景：auto-fill适合卡片对齐，auto-fit适合内容自适应。
-
HTML5通过CSSscroll-behavior属性和JavaScriptscrollTo()等方法原生支持平滑滚动：全局设置html{scroll-behavior:smooth}启用锚点跳转平滑效果；JS调用scrollTo、scrollIntoView、scrollBy时传入behavior:'smooth'实现脚本控制；需检测兼容性并降级处理；可动态启用或禁用以适配不同交互场景。
-
td:last-child能精准选中每行最后一列td，因其匹配tr下最后一个子元素且为td类型；若末尾是th则不匹配，避免误高亮表头；需写为trtd:last-child防止全局误配。
-
::before和::after通过content插入装饰性内容，可实现图标、气泡框、悬停动画等视觉效果，提升页面表现力且无需修改HTML结构。
-
vh和vw是CSS中基于视口尺寸的单位，分别表示视口高度和宽度的1%，用于实现响应式布局。1.vh和vw让元素尺寸直接与浏览器视口挂钩，例如width:50vw使元素宽度始终为视口宽度的一半，height:100vh使元素高度等于视口高度；2.它们与百分比（%）不同，%是相对于父元素尺寸，而vh/vw始终相对于视口；3.使用vh时需注意移动端地址栏影响视口高度的问题，可用svh、lvh、dvh等新单位或结合JavaScript解决；4.配合min()、max()、clamp()函数可限制元素在极端屏幕下的
-
必须在<head>中添加viewport元标签，否则页面在手机上会缩成一团；需动态设置font-size或使用vw单位适配不同屏幕；点击区域应≥44×44px并用touch-action:manipulation消除300ms延迟；iOS旧版Safari对flex有兼容问题，需针对性写法；真机测试不可替代。
-
margin用于控制元素间距离，围绕border外侧；可设置四方向或单独方向，取值包括长度、百分比、auto等；块级元素四边margin均生效，行内非替换元素上下margin无效，行内替换元素则全部生效；垂直margin可能发生折叠，取较大值合并；margin:0auto配合宽度可实现水平居中，垂直居中需借助其他布局方式。
-
本文详解如何在D3.js构建的可折叠树图中，为每个节点点击事件绑定逻辑，实时更新页面指定DOM元素（如<p>）的文本内容，实现“所点即所显”的交互效果。
-
JavaScript操作DOM的核心是通过内置API查找、读取和修改元素的内容、属性或样式；常用方法包括getElementById()和querySelector()查找元素，textContent与innerHTML修改内容，style与classList控制样式，createElement/append/remove动态操作节点，并需确保在DOM加载完成后执行。
-
父容器高度塌陷是浮动的必然结果，因浮动元素脱离文档流致父容器无法感知其高度；Clearfix通过伪元素或zoom触发BFC来修复，但应优先考虑flex/grid等现代布局。
-
用CSSGrid实现相册布局需设外层display:grid和grid-template-columns:repeat(auto-fill,minmax(250px,1fr))，每张图包<figure>，<img>加width:100%和height:auto；放大需JS动态插入modal并监听Esc关闭；onerror可兜底隐藏或替换占位图；滑动翻页优先用scroll-snap-type+flex。
-
响应式输入框通过CSS百分比、max-width、flex和媒体查询实现自适应布局。使用width:100%使输入框填充父容器，结合box-sizing:border-box防止尺寸溢出；设置max-width限制大屏宽度，提升可读性；在flex布局中利用flex:1实现弹性伸缩；通过@media针对不同屏幕精细调整，如小屏设100%、大屏固定300px。综合运用这些方法可确保输入框在各类设备上均表现良好，兼顾可用性与灵活性。
-
关闭CSS背景图片重复显示需设background-repeat为no-repeat；可单独控制横向（repeat-x）或纵向（repeat-y）平铺；常配合background-position、background-size等实现精确定位与适配。
