HTML4 table布局虽能用但不推荐，因其仅适用于表格数据，用于页面布局会导致语义混乱、响应式失效、可访问性差及维护困难；Flexbox对新手更友好，需注意父容器设置display: flex、主轴与交叉轴对齐属性分工，以及现代浏览器兼容性良好。
HTML4 table 布局还能用吗？
能，但不推荐——<table> 用于布局在现代开发中已被明确废弃。W3C 在 HTML4 末期就强调 table 只应用于**表格数据**（如成绩单、财务报表），而非页面结构。强行用 table 做导航栏或三栏布局，会导致语义混乱、响应式失效、屏幕阅读器无法正确解析，且嵌套 <tr><td> 多层后维护成本极高。
Flexbox 是不是新手友好？
对新手其实比想象中更友好，前提是避开几个典型误区：
-
display: flex必须加在**父容器**上，子元素自动变成 flex 项目——很多人误加在子元素自己身上 - 主轴方向默认是
row（水平），想垂直堆叠得显式写flex-direction: column -
justify-content控制主轴对齐，align-items控制交叉轴对齐——名字容易记混，建议用“主轴 = flex-direction 方向”来辅助判断 - 老版本 Android 4.4 以下和 IE 10 以下对 Flexbox 支持差，但纯学习或现代浏览器开发无需顾虑
/* 一个居中卡片的最小可行示例 */
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}为什么别用 table 做布局，哪怕它“看起来简单”
表面看，<table><tr><td>内容</td></tr></table> 确实几行就搞定两列，但问题藏在细节里：
- 无法用 CSS 独立控制某列宽度而不影响其他列（
width在td上常被忽略，必须靠table-layout: fixed+col标签） - 响应式断点时，
td无法像 flex 项目那样用flex-wrap换行或用order调整顺序 - SEO 和可访问性工具会把整个
table当作一份数据表读出，导航区域被识别成“含 3 行 1 列的表格”，毫无意义 - 想让某个
td垂直居中？得写vertical-align: middle，但父tr高度若未定义，它照样不生效——而 flex 的align-items: center一行解决
新手起步建议：从 flex 实现三个真实小场景开始
比空学属性更有效的是动手做具体事。下面三个例子覆盖 80% 的日常布局需求，代码少、效果直观：
立即学习“前端免费学习笔记（深入）”；
- 导航栏：
display: flex+justify-content: space-between+flex: 1给 logo 和菜单项分配空间 - 卡片列表（每行 3 张）：父容器
display: flex+flex-wrap: wrap，子卡片设flex: 0 0 calc(33.333% - 20px)（留间隙） - 登录框居中：外层
min-height: 100vh+display: flex+justify-content: center+align-items: center
FlexBox 的复杂点不在语法，而在理解“主轴/交叉轴”和“容器属性 vs 项目属性”的分工。一旦卡住，盯着控制台里元素的 computed styles 看 flex-direction 和 justify-content 实际值，比查文档更快定位问题。
