-
归档页核心是按年份高效分组并倒序排列文章，需确保日期为ISO格式、预提取年份、服务端分组须先排序且用annotate抽字段、Thymeleaf用LinkedHashMap保序。
-
使用position:absolute和z-index可实现按钮提示框，首先设置父按钮为relative定位，提示框为absolute定位并用top、left和transform调整位置，通过:hover触发opacity显示，同时设置z-index确保层级优先，避免被其他元素遮挡，配合transition实现淡入效果，并可通过::after伪元素添加指向箭头，提升视觉引导。
-
根本原因是盒模型解析顺序不同：负margin是否参与布局计算取决于box-sizing设置及父容器是否触发BFC，而非浏览器bug。
-
font-smoothing无法解决跨浏览器字体渲染问题，因其仅为WebKit/Blink私有属性，Firefox/IE不支持，且macOS与Windows行为不一致，实际渲染由系统API决定，CSS仅能微调。
-
必须显式设置background-color和color才能有效改变mark样式，仅设color无效；需满足WCAGAA对比度（≥4.5:1），并适配深色模式，避免XSS与语义滥用。
-
使用@mediaprint媒体查询可使CSS仅在打印时生效，推荐直接在现有CSS中编写打印样式或通过link标签引入独立print.css文件，并注意黑白配色、分页控制及调试技巧。
-
应优先用子选择器（>）而非后代选择器（空格），避免深层嵌套导致的样式污染；过长链式选择器建议改用语义类名，配合CSS自定义属性实现主题色统一管理。
-
auto-fit比auto-fill更适合卡片布局，因其会合并空轨道使现有卡片均分整行空间，而auto-fill强制生成所有可能列轨道导致内容少时右侧留白或横向滚动；minmax()第一参数须为固定长度且不超容器，第二参数仅支持1fr或max-content。
-
replaceAll在现代环境（Chrome85+/Firefox78+/Safari13.1+/Node.js15.0+）原生支持，专用于全局字面量替换，不接受带g标志的正则，纯字符串匹配不转义元字符，简单替换更安全高效，复杂逻辑仍需replace。
-
clip-path:polygon()是现代浏览器实现六边形最直接可控的方式，需用百分比坐标如(50%0%,100%25%,100%75%,50%100%,0%75%,0%25%)并配合明确宽高或aspect-ratio确保居中与响应式。
-
绝对定位元素撑不开父容器高度，因其脱离文档流使父容器无法感知其尺寸；同级元素会被遮挡因z-index依赖层叠上下文；应按布局需求选择定位方式而非强行修复。
-
clamp()是现代CSS实现字体自适应最稳方案，支持Chrome88+、Firefox79+、Safari14.1+，通过min/preferred/max三值约束缩放边界，避免vw单位在极端屏幕下的可读性或溢出问题。
-
本文详解如何通过现代CSS布局（Flexbox+语义化结构）使header元素自然位于容器顶部、水平居中，同时保持样式完整性与响应式健壮性。
-
HTML5无专属边框标签，图片边框全靠CSS实现；常用border+border-radius组合控制粗细、颜色、圆角；box-shadow可实现浮雕/双线等效果；outline和border-image不推荐用于常规精致边框。
-
原生语义标签比ARIA更可靠；<divrole="button">缺乏键盘支持和表单行为，应优先用<button>；有可见文本用aria-labelledby，纯图标用aria-label；aria-live="polite"用于状态提示，assertive用于关键错误；FontAwesome装饰性图标自动aria-hidden="true"，功能性图标需显式声明语义。
