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也是可以设置它的宽度的。

相关推荐
龙在天33 分钟前
npm run dev 做了什么❓小白也能看懂
前端
hellokai1 小时前
React Native新架构源码分析
android·前端·react native
li理2 小时前
鸿蒙应用开发完全指南:深度解析UIAbility、页面与导航的生命周期
前端·harmonyos
去伪存真2 小时前
因为rolldown-vite比vite打包速度快, 所以必须把rolldown-vite在项目中用起来🤺
前端
KubeSphere2 小时前
Kubernetes v1.34 重磅发布:调度更快,安全更强,AI 资源管理全面进化
前端
wifi歪f2 小时前
🎉 Stenciljs,一个Web Components框架新体验
前端·javascript
1024小神2 小时前
如何快速copy复制一个网站,或是将网站本地静态化访问
前端
掘金一周2 小时前
DeepSeek删豆包冲上热搜,大模型世子之争演都不演了 | 掘金一周 8.28
前端·人工智能·后端
moyu842 小时前
前端存储三剑客:Cookie、LocalStorage 与 SessionStorage 全方位解析
前端
不爱说话郭德纲2 小时前
👩‍💼产品姐一句小优化,让我给上百个列表加上一个动态实时计算高度的方法😿😿
前端·vue.js·性能优化