order属性可改变Flex项目视觉顺序而不改HTML结构，仅对Flex子元素有效，默认值0，数值越小越靠前；需注意可访问性、维护性及与DOM顺序的分离。
用 order 控制 Flex 项目显示顺序
Flex 布局中，order 是唯一能直接改变视觉顺序而不改动 HTML 结构的 CSS 属性。它只对 Flex 容器的直接子元素生效，数值越小越靠前，默认值是 0。
常见错误是给非 Flex 子元素设 order，或者在 Grid 或普通流式布局里误用——它完全无效。
-
order不影响 DOM 顺序，屏幕阅读器仍按 HTML 顺序读取，可访问性需额外考虑 - 避免用大正负数（如
order: 999），容易后期维护混乱；推荐用小整数（-1,0,1,2）留出调整余地 - 多个元素设相同
order值时，回退到 HTML 原始顺序
.container {
display: flex;
}
.item-a { order: 2; }
.item-b { order: 0; }
.item-c { order: 1; }
此时视觉顺序为 item-b → item-c → item-a，HTML 中顺序不变。
Grid 布局中用 grid-row / grid-column 显式定位
当需要更精细控制（比如跨行、错位、重叠），Grid 比
注意：grid-area 或 grid-row + grid-column 必须配合 display: grid 和明确的 grid-template-rows/grid-template-columns 才能生效；否则只是声明，无实际效果。
- 不推荐仅用
grid-row: 1这类单值写法，容易因隐式网格行为导致意外布局 - 如果子元素没设行列位置，Grid 会按 HTML 顺序自动填入，所以“重排”必须显式指定
- 响应式中可结合
@media重新定义grid-template-areas，一套 HTML 实现多套视觉流
.layout {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
.header { grid-area: header; }
.main { grid-area: main; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }
避免用 float 或 position: absolute “强行调序”
这两种方式看似能挪动元素，但本质是脱离文档流，会引发一连串副作用：父容器高度塌陷、后续元素错位、响应式断裂、打印样式异常。
典型错误场景包括：用 float: right 把侧边栏提到顶部，或用 top: -100px 把某个段落上拉——它们破坏了布局的可预测性。
-
float在现代布局中已基本淘汰，仅用于文字环绕等极少数场景 -
position: absolute应只用于浮层、提示框、固定按钮等真正需要脱离流的元素 - 一旦用了这些，JS 获取元素位置、计算高度、监听 resize 都可能出错
语义与可访问性不能被 CSS 显示顺序覆盖
CSS 的 order 或 Grid 定位只改视觉呈现，DOM 顺序和语义结构不变。这对键盘 Tab 导航、屏幕阅读器朗读顺序、SEO 解析都至关重要。
如果业务逻辑上「操作按钮」必须在「表单字段」之后才合理，但为了视觉把按钮提前了，用户用键盘 tab 时仍会先聚焦字段再聚焦按钮——这没问题；但如果反过来，把按钮 HTML 放前面、再用 CSS 塞到后面，就可能导致焦点跳转突兀或语义断裂。
- 优先保证 HTML 顺序符合逻辑流（例如：标题 → 内容 → 操作 → 相关链接）
- 用 CSS 调序只是视觉优化，不是重构语义
- 复杂交互组件（如多步骤表单）建议用
aria-flowto或tabindex辅助控制焦点流，而非依赖视觉位置
真正难改的从来不是 CSS 显示顺序，而是 HTML 结构是否预留了弹性——比如一开始就把主内容放在 DOM 前面，侧边栏放后面，再用 Flex 或 Grid 调整视觉位置，比后期硬掰要可靠得多。
