日期对齐需用flex布局，日期容器设min-width:72px并右对齐，标题用flex:1加文字截断；HTML仅保留<article><time>三层语义结构；CSS避开gap和aspect-ratio，用margin-bottom统一间距；JS解析日期须确保输入含年份且兼容中文月名。
日期怎么对齐才不乱？用 flex + min-width 控制固定宽度
日期栏如果用 float 或纯 text-align，很容易在不同长度日期（比如“1月1日” vs “12月25日”）下错位。最稳的方式是给日期容器设固定最小宽度，并用 flex 布局让标题自动撑开剩余空间。
- 日期容器加
style="min-width: 72px; text-align: right;"（72px 足够容纳“XX月XX日”） - 外层用
display: flex，日期和标题分别作为子元素 - 标题加
flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;防止换行挤乱布局
HTML 结构要多简？只留 <article>、<time>、<a>
语义化不是堆标签，而是删到只剩必要节点。新闻列表不需要 <div class="item"> 这类冗余包装——浏览器默认样式足够干净，加 class 反而容易被 CSS 框架污染。
- 每个条目用
<article>（语义正确，且天然有 margin-bottom） - 日期用
<time datetime="2024-04-05">4月5日</time>（datetime属性方便机器读取，显示文本可自由格式化） - 标题直接套
<a href="...">，不加<h3>或<span>
<article> <time datetime="2024-04-05" style="min-width:72px;text-align:right;">4月5日</time> <a href="/news/123">国产大模型推理速度提升三倍</a> </article>
纯 CSS 不依赖框架，怎么保证兼容性？避开 gap 和 aspect-ratio
老版本 Safari（iOS 14.5 之前）不支持 gap，Chrome 早期也不认 aspect-ratio。极简排版反而要更保守：用 margin-bottom 控制间距，用 padding 替代 gap。
- 所有间距统一用
margin-bottom: 1rem，别混用gap和margin -
<time>不设display: block，保持内联特性，靠flex对齐 - 全局禁用
* { box-sizing: border-box }—— 极简场景下，content-box更可控，避免 padding 影响宽度计算
日期动态生成时，toLocaleDateString 的坑在哪？
如果后端没传标准 ISO 日期，前端用 new Date().toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' }) 生成“X月X日”，要注意两点：
立即学习“前端免费学习笔记（深入）”；
- 传入字符串必须含年份，否则 Safari 会解析失败（
"4/5"不行，"2024-4-5"或"2024/4/5"才行） - 中文环境下
month: 'short'返回“4月”，但某些安卓 WebView 会返回“四月”，建议加兜底：.replace('四月','4月').replace('五月','5月') - 别用
getMonth() + 1手动拼接——月份从 0 开始，容易漏加 1，出错率高
日期栏宽度、HTML 语义粒度、CSS 兼容边界、JS 日期解析——这四个点卡住，列表就不再“极简”，而是“看着简、改着崩”。
