-
Bootstrap5+默认将.page-link的border-radius设为0，需用更具体选择器（如.pagination>li:first-child.page-link）实现首尾圆角、中间无圆角，并同步调整focus状态的box-shadow和border-radius以避免视觉毛边。
-
Grid磁贴布局需用grid-template-columns:repeat(auto-fill,minmax(240px,1fr))和grid-auto-rows:1fr实现等宽不等高；hover吸附动画应分层transition-delay，Safari兼容需加translateZ(0)和-webkit前缀；移动端用@media(hover:none)禁用hover并设min-block-size保点击区域。
-
通过组合选择器与Flex布局结合，可精准控制子元素样式与对齐。使用.container>.item选中直接子元素，.container.header+.content选择相邻兄弟，.navli:first-child结合伪类设置首项样式；Flex容器通过justify-content和align-items控制主轴与交叉轴对齐，子项用align-self单独调整，flex-grow与flex-shrink管理空间分配；实战中导航栏两端对齐用space-between，中间菜单居中通过margin:0
-
顶部公告横幅需用bodypadding-top“推下”内容防遮挡，动态读取高度并存localStorage实现关闭持久化，响应式用flex控制文字与按钮布局，iOS加transform优化重绘。
-
JavaScript支持函数式编程，核心是纯函数（相同输入恒得相同输出、无副作用）和高阶函数（接收或返回函数），二者结合提升可预测性、可测试性与组合能力。
-
适合Base64内联的图标须同时满足：单文件≤4KB（PNG/JPEG）或≤2KB（SVG）；仅首屏少量使用；无动态变色缩放需求；非CDN高命中资源。
-
最稳的纯HTML转MP4方案是Puppeteer逐帧截图+FFmpeg合成：先用无头浏览器加载HTML并精准控制时序截图（需networkidle0、固定分辨率、PNG格式），再以匹配帧率和yuv420p格式用FFmpeg合成MP4；html2canvas等方案无法支持动画、WebGL及音视频，仅适用于静态快照。
-
abbr标签用于标记缩写词或首字母缩略词，必须同时使用<abbr>包裹且提供非空title属性才能实现语义化和无障碍访问。
-
先保证链接可访问和页面跳转，再用JavaScript增强体验。通过原生HistoryAPI（pushState、replaceState）更新URL并监听popstate事件实现无刷新路由，拦截内链点击进行异步内容加载；结合路由表匹配路径并渲染对应视图，支持动态插入HTML或懒加载片段；服务端返回统一入口页以保障无JS时的基础可用性，实现渐进增强；附加标题管理、loading提示与hashfallback兼容旧环境，核心是分层控制：HTML负责可用，JS提升体验。
-
Notion不支持直接运行自定义HTML，因官方禁止script、iframe（非白名单）及内联事件；唯一合法方式是将完整页面部署至HTTPS外部地址后用/embed嵌入。
-
使用margin和gap调整卡片间距，.card设置margin-bottom并清除最后一项，推荐flex或grid布局用gap自动分配间距，grid支持行列不同gap，注意避免margin与padding叠加，统一box-sizing，移动端用rem适配。
-
translate="no"仅在Chrome104+、Firefox115+、Safari16.4+中有效，作用于<p>、<div>等文本容器及<button>、<label>可见文本，对表单控件、placeholder、SVGtext及JS动态文本无效，且具有单向继承性。
-
本文深入解析为何z-index:-1的::before伪元素无法置于其父元素下方，并阐明层叠上下文的触发机制；通过添加z-index:1到相对定位父元素即可正确建立局部层叠上下文，使伪元素层级按预期生效。
-
event.relatedTarget是鼠标边界事件中指向相邻节点的只读属性：mouseover时为离开的元素，mouseout/mouseleave时为将进入的元素，mouseenter时为离开的元素；非边界事件中为null。
-
JavaScript动态计算剩余天数并用CSS控制红色预警样式，HTML仅作结构容器；HTML本身无执行能力，无法读取时间或自动更新，倒计时必须由JS每秒计算差值并刷新DOM。
