1、在 HTML 中，元素通常分为两类
- 块级元素（Block Elements）：
块级元素占据其父容器的全部宽度，即使内容不足以填满宽度。
块级元素从新的一行开始，并且会把它之后的元素推到下一行。 - 行内元素（Inline Elements）：
行内元素只占据它内容的宽度，不会自动换行，其他元素可以和它们在同一行中显示
2、 block 属性的作用
block 属性让 Space 组件表现得像块级元素一样，占据父容器的全部宽度。换句话说，它会自动扩展宽度以适应其容器的宽度，无论里面的内容有多少。
3、 例子
bash
<div style={{ width: '300px', border: '1px solid red' }}>
<Space block direction="vertical">
<button>Button 1</button>
<button>Button 2</button>
</Space>
</div>在这个例子中，Space 组件的父容器宽度是 300px，并且 Space 使用了 block 属性。因此，Space 会占据父容器的整个宽度，即 300px，而 button 元素会垂直排列并撑满 300px 的宽度。
如果不使用 block
如果没有 block 属性，Space 组件将按行内元素的方式表现，宽度只会根据其内容自动调整，通常只占用其子元素的实际宽度，不会填满父容器。
bash
<div style={{ width: '300px', border: '1px solid red' }}>
<Space direction="vertical">
<button>Button 1</button>
<button>Button 2</button>
</Space>
</div>在这个场景中，Space 组件的宽度将只根据按钮的宽度调整，不会占据整个父容器的宽度。
4、 总结
- 当你给 Space 组件加上 block 属性时，它会表现得像块级元素一样，自动填满父容器的宽度。
- 如果没有 block 属性，Space 的宽度只会根据内容调整，不会自动撑满父容器的宽度。
- 这是有助于在某些布局中让元素占满一行或特定的区域，尤其是表单元素或按钮组在垂直排列时使用。