flex布局比float更稳，因flex-wrap可自动换行且基线对齐；progress需JS动态更新value/max；计数器应使用data属性驱动；移动端需防点透，用touchstart+preventDefault及pointer-events控制。
任务列表用 flex 布局比 float 更稳
浮动布局在任务项高度不一致时容易错行，尤其加了「已完成」徽标后更难对齐。用 display: flex 容器 + flex-wrap: wrap 能自动换行且保持基线对齐。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给任务容器设
display: flex; flex-wrap: wrap; gap: 12px;，gap比margin更可靠，避免首尾多留白 - 每个任务项用
flex: 1 1 calc(50% - 6px);实现两列自适应（移动端可改calc(100% - 6px)） - 别用
width: 50%+float—— Safari 旧版里小数像素会累积偏移，导致第三项掉到下一行
progress 标签的 value 和 max 别硬编码
进度条显示不准，常是因为 <progress value="3" max="5"></progress> 这类写法没和 JS 数据同步。一旦任务增减或状态变更，HTML 就脱节了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 初始化时用 JS 动态写入：
document.querySelector('.task-progress').value = completedCount;，max设为总任务数 - 避免在 HTML 里写死
value属性 —— 浏览器会缓存初始值，JS 后续改.value属性才生效，但改setAttribute('value', ...)反而无效 - 需要兼容 IE？改用
<div class="progress-bar"><div style="width: 60%"></div></div>，并统一用 JS 控制内层宽度
「今日已完成」数字用 data- 属性驱动更新
用户刷新页面后，完成数还是昨天的值，或者点击任务没实时变 —— 多半是 DOM 更新没触发，或 JS 读的是静态文本内容。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把计数器写成：
<span id="completed-count" data-total="5" data-completed="2">2/5</span> - 每次任务状态变化时，只更新
dataset.completed和dataset.total，再用一次el.textContent = `${el.dataset.completed}/${el.dataset.total}` - 别用
innerText.split('/')[0]取当前值 —— 中文斜杠、空格、富文本标签都会让解析失败
移动端点透问题会让任务卡片“点不动”
在 iOS 上，点了完成按钮又立刻弹出蒙层，再关掉，下层任务卡片却响应了点击 —— 这是 click 事件穿透导致的误操作。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有可交互任务项加
cursor: pointer和-webkit-tap-highlight-color: transparent; - 蒙层出现时，给
加style="pointer-events: none;"，关闭时再移除 —— 别只靠z-index遮挡 - 完成按钮用
touchstart触发，而非click，并在回调开头加event.preventDefault()
任务中心真正难的不是画得像不像，而是数据状态和 DOM 的同步节奏。尤其是用户离线操作后再联网，dataset 和 progress.value 的更新顺序稍有错位，进度就会卡在 80% 不动。
