-
要实现卡片翻转效果，需结合CSS的perspective、transform-style和backface-visibility属性。1.构建包含正反面的.card容器，设置perspective营造3D视觉；2..card-face共用绝对定位与隐藏背面，front初始rotateY(0deg)，back为rotateY(180deg)；3.通过@keyframes定义从0deg到180deg的rotateY动画，配合infinitealternate实现循环翻转；4.添加ease-in-out缓动、h
-
flex-grow按比例分配剩余空间，flex-shrink控制溢出时的收缩比例，二者结合实现弹性布局。
-
需结合HTML、CSS与JavaScript实现：一、CSS切换内容区块；二、平滑滚动与锚点高亮；三、技能进度条动态加载；四、响应式折叠菜单；五、可交互作品卡片轮播。
-
提示条应使用opacity与visibility组合实现淡入淡出，或transform与opacity组合实现滑入+淡入，避免使用top或display切换，以防止重排和动画失效。
-
防抖和节流是JavaScript中优化高频事件的两种手段。防抖通过延迟执行，确保事件停止触发一段时间后才执行函数，适用于搜索框输入等场景；节流则保证函数在固定时间间隔内最多执行一次，适用于滚动监听、动画更新等需规律执行的场景。两者核心区别在于：防抖强调最后一次触发有效，节流强调周期性执行。掌握它们可显著提升性能与用户体验。
-
JavaScriptDOM操作核心是先选中元素再增删改查，推荐使用getElementById、querySelector、querySelectorAll等高效选择器，并通过缓存元素、使用classList、DocumentFragment和事件委托提升性能与安全性。
-
使用Flexbox和媒体查询可高效实现响应式导航。1.用Flexbox创建水平导航栏，设置flex-wrap:wrap允许换行；2.中等屏幕下导航项自动折行；3.移动端通过@media(max-width:768px)切换为垂直堆叠布局，隐藏nav-links并显示汉堡按钮；4.JavaScript控制点击菜单切换active类，实现展开/收起。结合display、flex-direction与断点控制，适配多设备体验。
-
:hover在鼠标悬停时触发，适用于提示可交互元素；:focus在键盘聚焦时生效，对无障碍访问至关重要；两者设备支持不同，应结合使用并确保可访问性。
-
HTML5标签页可通过四种方案实现：一、纯CSS的:target伪类；二、数据属性驱动的JS切换；三、ARIA语义化可访问方案；四、Flexbox布局加CSS过渡动画。
-
用::after伪元素实现按钮hover下划线的关键是：按钮设position:relative，::after设absolute定位并用transform:scaleX(0/1)配合transform-origin控制滑动方向，transition实现0.3秒平滑动画。
-
grid-row跨行必须指定起始和结束行线，如2/4占第2、3行；支持命名线如a/c，span需配合起点如3/span2；单独span2由浏览器自动分配起点但不可控。
-
投稿HTML代码至开源平台需五步：一、规范代码并配README；二、注册GitHub/GitLab/Gitee账户；三、本地初始化Git仓库并关联远程；四、添加MIT许可证及更新README；五、推送代码并启用Pages部署。
-
HTML5中元素水平居中需依类型选方案：一、块级元素用margin:0auto；二、Flexbox用justify-content:center；三、行内元素用text-align:center+inline-block；四、绝对定位用left:50%+transformX(-50%)；五、Grid用place-items:center。
-
微任务主要由Promise回调、MutationObserver和queueMicrotask产生。1.Promise的.then()、.catch()、.finally()会在状态变化后将回调放入微任务队列；2.MutationObserver用于监听DOM变化，其回调作为微任务批量处理以优化性能；3.queueMicrotask是ES2021新增API，允许开发者显式安排微任务。这些微任务会在当前宏任务执行完毕后立即全部执行，确保异步操作顺序可控并优化UI更新，从而提升代码执行的一致性和性能表现。
-
本文讲解如何在页面刷新后仍能准确判断DOM元素是否可水平滚动，并动态显示左右导航箭头，解决useEffect初始检查失效的问题。
