用 css grid 布局日历卡片需设 grid-template-columns: repeat(7, 1fr) 和 grid-auto-rows，确保42个子元素（含空占位）自动填满；日期单元格用 aspect-ratio: 1 + flex 居中；通过 data-today 和 data-weekend 属性精准控制样式，避免 :nth-child 错位；响应式用 clamp() 控制字体，触控反馈加 :focus-visible 和 :active。
怎么用 CSS Grid 布局日历卡片结构
纯 HTML + CSS 日历不需要 JavaScript 就能渲染出月视图，关键在用 grid 划分行列。浏览器原生支持好，display: grid 配合 grid-template-columns: repeat(7, 1fr) 能直接撑开 7 列（周一到周日），再用 grid-auto-rows 控制行高。
常见错误是手动写 42 个 <div>（6 行 × 7 列）——没必要。只要保证容器有 42 个子元素（可用空 <code><div> 占位首尾空白天），CSS 就会自动填满网格。首日偏移量用 <code>grid-column-start 或额外插入空格元素都行，后者更直观易调。
- 每月第一天是星期几，决定前面要补几个空格元素（0–6 个）
- 最后一行可能多出无效日期（如 31 号之后的空格），加
opacity: 0.4或pointer-events: none区分 - 避免用
float或inline-block模拟行列，响应式和对齐问题多
如何让日期数字居中且适配不同尺寸
卡片内数字居中不是靠 text-align: center 就完事——得配合容器的宽高约束和 flex 布局。每个日期单元格建议设为正方形（比如 aspect-ratio: 1），再用 display: flex; align-items: center; justify-content: center 确保数字始终居中，不随字体大小或缩放偏移。
移动端小屏下，font-size 必须用 rem 或 clamp()，否则数字会溢出或太小。例如：font-size: clamp(0.75rem, 4vw, 1.125rem)。
- 别设固定
width/height，用aspect-ratio更健壮（兼容 Chrome 103+、Firefox 110+） - IE 不支持
aspect-ratio？用padding-top: 100%+position: relative/absolute替代（但代码变复杂） - 选中当天要用
[data-today]属性标记，而不是靠 JS 动态加 class，保持纯 CSS 可控
怎么给「今天」和「周末」加不同样式
纯 CSS 实现差异化样式，依赖 HTML 中预埋的属性。比如服务端或构建时注入 data-weekend="true"、data-today="true"，CSS 就能直接匹配：[data-today] { background: #007bff; color: white; }，[data-weekend] { opacity: 0.7; }。
注意：不能用 :nth-child(6), :nth-child(7) 代表周末——那是按 DOM 顺序，不是按实际星期几；月初/月末会导致错位。
- 周末标识必须由生成 HTML 的逻辑决定（比如 PHP/Python 模板里判断
date.weekday()） - 「今天」样式优先级要高于「周末」，否则
[data-today][data-weekend]可能被覆盖 - 避免用
!important，改用更具体的属性选择器或增加一层 wrapper 类
为什么 hover 效果在移动端失效
因为 :hover 在多数触摸设备上只在模拟鼠标时触发（比如 Safari iPad 的“悬停”模式），真机点按默认不触发。想让卡片点击反馈可见，必须加 :active 或用 @media (hover: hover) 做条件区分。
更稳妥的做法是统一用 :focus-visible + tabindex="0" 支持键盘导航，再搭配 outline: none 和自定义背景变化——这样既满足可访问性，又在触屏和桌面都生效。
- 别只写
div:hover { ... }，加上div:focus-visible { ... } - 移动端点按延迟（300ms）不影响样式，但用户感知弱，建议加轻微 scale 变换（
transform: scale(0.98)）增强反馈 - 如果完全禁用 outline，请确保有其他视觉提示，否则键盘用户无法识别焦点位置
真正难的不是画出格子，而是让不同月份、不同起始日、不同设备下的日期对齐和语义准确。属性驱动样式比位置推算可靠得多，HTML 里多写两个 data- 属性，CSS 就少一堆 hack。
