A. Normal Flow 属性清单
1) display:block
2) display:inline（同一行连续排布）
3) display:inline-block（可设宽高）
4) width/height 对 block 与 inline-block 的影响
5) margin/padding 在文档流中的占位
6) position:absolute 脱离普通流

B. Flex 属性清单
1) display:flex
2) flex-direction: row / column
3) justify-content: flex-start / center / space-between
4) align-items: flex-start / center / flex-end
5) gap 对子项间距影响

C. Grid 属性清单
1) display:grid
2) grid-template-columns
3) gap / row-gap / column-gap
4) justify-items / align-items
5) grid-column / grid-row / span

Case 1: Normal Flow（块、行内、行内块）

预期: block 独占一行；inline 连续排布并可自动换行；inline-block 连续排布且宽高生效；ABS 不占流内空间。

1) block（默认纵向堆叠）

block A width:90

block B width:140

2) inline（同一行，内容过长会换行）

inline-1 inline-2 inline-3-long-text

3) inline-block（可设 width/height）

ib-1 ib-2

ABS

Case 2: Flex 属性对照

预期: 子样例按纵向堆叠。上: row+space-between；下: column+align-end；观察 gap 间距。

Case 3: Grid 属性对照

预期: 3列网格自动放置；G2 跨2列；G4 固定到第1列第2行；观察 gap 与 item 对齐。

G2 span2

G4 fixed