display的block和inline-block有什么区别

1.布局流 block是独占一行,而inline-block是与行内元素水平排列

2.默认宽度 block是撑满父容器宽度(width:100%) inline-block是由内容决定

示例如下:

js 复制代码
  <style>

    .block-box{
         
       height:300px;
       background-color:red;
       display:block;
     }
     
     .inline-block-box{
       height:300px;
       background-color:red;
       display:inline-block;

     }

   </style>

  <body>

     <div class="block-box">Block 1</div>
     
     <div class="inline-block-box">inline-block-box</div>

  </body>
  
  

我们看下效果:

当然block也是可以设置它的宽度的。

相关推荐
许商1 天前
【stm32】【printf】
java·前端·stm32
JIngJaneIL1 天前
智慧物业|物业管理|基于SprinBoot+vue的智慧物业管理系统(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·论文·智慧物业管理系统
爬坑的小白1 天前
vue 2.0 路由跳转时新开tab
前端·javascript·vue.js
爬坑的小白1 天前
vue x 状态管理
前端·javascript·vue.js
凌览1 天前
一键去水印|5 款免费小红书解析工具推荐
前端·javascript·后端
lichong9511 天前
鸿蒙 web组件开发
前端·typescript
1024小神1 天前
在html中使用js动态交换两个元素的位置
前端
鹿鹿鹿鹿isNotDefined1 天前
逐步手写,实现符合 Promise A+ 规范的 Promise
前端·javascript·算法
一千柯橘1 天前
Electron - IPC 解决主进程和渲染进程之间的通信
前端
申阳1 天前
Day 16:02. 基于 Tauri 2.0 开发后台管理系统-项目初始化配置
前端·后端·程序员