-
vertical-align是图片行内对齐的唯一可控方式，需显式设置top/middle/bottom；flex布局更可靠但需改结构；line-height和font-size会干扰对齐；object-fit控制图片内容对齐。
-
JavaScript可直接在浏览器控制台运行，无需配置环境；首个小项目是点击切换“未完成”/“已完成”文字，需用textContent而非innerHTML，script应置于</body>前或用DOMContentLoaded确保DOM加载完成。
-
HTML5不直接显示图标，需通过<img>标签引入SVG/PNG、iconfont字体或内联SVG实现；常见问题包括路径错误、MIME类型不符、CSS未生效及跨域限制。
-
最可靠写法是grid-template-columns:repeat(auto-fit,minmax(250px,1fr)))；auto-fit比auto-fill更实用，避免空轨道；需设子项min-width:0并配合断行规则防溢出；gap替代margin更安全，兼容旧版需加grid-gap回退；IE11等需@supports降级为flex布局。
-
使用order属性可改变Flex子元素显示顺序，数值小的优先排列，结合flex-direction可调整主轴方向，常用于响应式布局中不改变DOM结构的情况下调整视觉顺序。
-
实现复杂卡片Grid布局，核心是合理使用CSSGrid的网格划分、区域命名和响应式控制。不需要JavaScript，仅靠CSS就能创建视觉丰富且自适应的布局。定义基本Grid容器使用display:grid启用网格布局，并通过grid-template-columns和grid-template-rows划分行列。配合gap设置卡片间距。示例：.card-grid{display:grid;grid-template-columns:rep
-
flex-basis定义初始尺寸，flex-grow控制剩余空间扩展比例，flex-shrink决定溢出时压缩比例，三者共同决定Flex子元素的空间分配，推荐使用flex简写属性统一设置。
-
HTML中<h1>至<h6>是语义层级标记而非字号开关，须按内容逻辑严格嵌套（h1→h2→h3…），禁止跳级或滥用；现代实践推荐单个<h1>表页面主旨，配合<section>和<article>实现正确层级解析。
-
fixed头部遮挡内容是因为它脱离文档流，后续元素不为其预留空间；解决方法是给body设与头部高度一致的padding-top，或用JS动态设置margin-top。
-
JavaScript浏览器端不支持TCP/UDP编程，仅Node.js通过net和dgram模块提供异步事件驱动的原生网络能力，需注意Buffer处理、资源清理及浏览器限制。
-
多个link标签并行加载不必然慢，但默认阻塞渲染且受HTTP/1.1并发限制易串行；HTTP/2下改善但仍建议合并关键CSS、按路由拆分、避免@import、确保CDN正确识别contenthash变更。
-
模态框必须用position:fixed而非absolute，以避免滚动偏移或被overflow:hidden截断；需设高z-index（如1050）、全视口覆盖、遮罩pointer-events:none、内容pointer-events:auto；关闭逻辑须统一处理点击遮罩、Esc键和close()调用，注意preventDefault、事件监听清理及body滚动控制；显隐应使用opacity/visibility过渡而非display:none，确保无障碍与动画稳定。
-
纯CSS无法实现物理碎裂，只能用clip-path+transform模拟视觉碎裂重组，需固定尺寸、background-image、polygon()路径、≤16块，且Chrome105+/Firefox兼容性受限；Canvas+requestAnimationFrame更可控。
-
JavaScriptDate对象仅存储毫秒时间戳，不处理时区转换、加减或格式化；newDate('2023-10-05')因ISO字符串按UTC解析导致本地时区偏差；应使用newDate(2023,9,5)或Date.UTC()明确日历日；时间运算需统一基准，避免混用getHours()/getUTCHours()；复杂场景须依赖date-fns等专用库。
-
使用CSS:hover伪类可为按钮添加悬停效果，提升交互体验。通过改变背景色、文字颜色、边框、阴影并结合transition实现平滑动画，如示例中按钮背景变深、边框加暗、添加阴影和轻微上移。需注意兼容性，避免在悬停中触发关键功能，控制过渡时间在0.1～0.3秒，保持颜色对比度，防止大幅位移影响页面稳定性。
