html4 table布局虽能用但不推荐，因其仅适用于表格数据，用于页面布局会导致语义混乱、响应式失效、可访问性差及维护困难；flexbox对新手更友好，需注意父容器设置display: flex、主轴与交叉轴对齐属性分工，以及现代浏览器兼容性良好。
HTML4 table 布局还能用吗？
能，但不推荐——
用于布局在现代开发中已被明确废弃。W3C 在 HTML4 末期就强调 table 只应用于**表格数据**（如成绩单、财务报表），而非页面结构。强行用 table 做导航栏或三栏布局，会导致语义混乱、响应式失效、屏幕阅读器无法正确解析，且嵌套
多层后维护成本极高。
Flexbox 是不是新手友好？
对新手其实比想象中更友好，前提是避开几个典型误区：
-
display: flex 必须加在**父容器**上，子元素自动变成 flex 项目——很多人误加在子元素自己身上
- 主轴方向默认是
row（水平），想垂直堆叠得显式写 flex-direction: column
-
justify-content 控制主轴对齐，align-items 控制交叉轴对齐——名字容易记混，建议用“主轴 = flex-direction 方向”来辅助判断
- 老版本 android 4.4 以下和 IE 10 以下对 Flexbox 支持差，但纯学习或现代浏览器开发无需顾虑
@@######@@
为什么别用 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 实际值，比查文档更快定位问题。
/* 一个居中卡片的最小可行示例 */ .container { display: flex; justify-content: center; align-items: center; height: 100vh; }
|