用Flexbox实现三栏响应式布局需设main为flex容器，主内容flex:1自适应，侧边栏固定宽；小屏用flex-direction:column切换单列；卡片间距用padding或gap替代margin塌陷；导航焦点用:focus-visible加outline保障可访问性；字体优先系统栈，避免闪动。
用 Flexbox 实现博客首页的三栏响应式结构
直接用 display: flex 搭建头部、主体（主内容 + 侧边栏）、页脚，比浮动或 inline-block 更可靠。初学者常卡在子元素不撑开父容器，或在小屏下没及时切为单列——关键不是写多少 CSS，而是控制好 flex-direction 和断点。
-
main容器设为display: flex，主内容区用flex: 1自适应剩余宽度，侧边栏固定width: 300px - 在
@media (max-width: 768px)中把main改为flex-direction: column，侧边栏自动下沉 - 避免给子元素设
float或position: absolute，它们会脱离 flex 流，导致布局错乱
文章卡片的 margin 塌陷与 padding 替代方案
多个 .post-card 垂直排列时，上下 margin: 20px 会合并成一个 20px，而不是预期的 40px 间距。这不是 bug，是 CSS 规范行为；强行用 margin-top + margin-bottom 叠加反而难维护。
- 改用
padding：给包裹卡片的.posts-list设padding: 20px 0，每张卡片只设margin-bottom: 20px - 或者启用
gap：把卡片容器设为display: flex; flex-direction: column; gap: 20px，现代浏览器全支持，语义更清晰 - 别用
margin: 0 auto居中卡片——它只对块级元素水平居中有效，且依赖宽度限制；卡片本身应设max-width: 800px再配合margin: 0 auto
导航栏点击后无反馈？检查 :focus-visible 与 outline
本地测试时点击导航链接没高亮，上线后用户也发现键盘 Tab 切换不到菜单项——大概率是重置了 outline 却没补交互反馈。CSS 里一句 * { outline: none } 会同时干掉可访问性焦点提示和鼠标点击反馈。
- 只对按钮类元素禁用 outline：
button:focus { outline: none }，但必须立刻补上box-shadow: 0 0 0 2px #007bff作为替代 - 导航链接保持默认
outline，或用a:focus-visible { outline: 2px solid #007bff }精准控制（仅键盘触发） - 别用
text-decoration: none一刀切移除下划线——先保留，等整体配色定稿后再统一处理
header {
background: #2c3e50;
color: white;
padding: 1rem;
}
nav ul {
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
nav li + li {
margin-left: 1.5rem;
}
nav a {
color: #ecf0f1;
text-decoration: none;
}
nav a:hover,
nav a:focus-visible {
text-decoration: underline;
outline: 2px solid #3498db;
}
字体加载慢导致首页“闪动”？优先用系统字体栈
引入 Google Fonts 或自托管 @font-face 后，文字先显示默认宋体，再突然跳成目标字体，破坏阅读节奏。初学者容易忽略字体加载的渲染阻塞链。
立即学习“前端免费学习笔记（深入）”；
- 起步阶段用系统字体栈：
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif - 真要用自定义字体，必须加
font-display: swap，否则 Chrome 会白屏等待 3s - 别在
body上设font-size: 62.5%再用 rem——它会让 1rem = 10px，但用户系统字号偏好被无视；直接用font-size: 16px或留空靠浏览器默认
实际做下来，最难的不是写样式，是忍住不马上加花哨动画、不急着套 CSS 框架、不复制粘贴整套“精美模板”。把 header / main / aside / footer 四个语义标签的盒模型理清楚，比调一百次颜色更重要。
