HTML 什么是块级元素?

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 的宽度只会根据内容调整,不会自动撑满父容器的宽度。
  • 这是有助于在某些布局中让元素占满一行或特定的区域,尤其是表单元素或按钮组在垂直排列时使用。
相关推荐
前端_学习之路34 分钟前
React--Fiber 架构
前端·react.js·架构
伍哥的传说1 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409191 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding1 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜1 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD1 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding1 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
柚子8161 小时前
scroll-marker轮播组件不再难
前端·css
你的人类朋友2 小时前
🫏光速入门cURL
前端·后端·程序员
兴趣使然_2 小时前
【笔记】使用 html 创建网址快捷方式
笔记·html·js