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

相关推荐
Simon_He9 分钟前
一个渲染内核,五个框架包:我的流式 Markdown 渲染库是怎么长成“全家桶”的
前端·vue.js·markdown
小满zs28 分钟前
关于HBuilderX+ 微信小程序开发工具启动的问题
前端·uni-app
林深见鹿_海蓝见鲸35 分钟前
微信小程序反编译完整教程(Windows 新手版)
前端
默_笙1 小时前
😋 我让爬虫终于看到了我的网站,后端同事说"这也行?"(上):SEO 与渲染模式
前端·javascript
feixing_fx1 小时前
告别枯燥字体:Web 字体加载策略与 font-display 最佳实践
前端·css·前端框架·交互·css3
Liora_Yvonne2 小时前
不懂后端,只会 TypeScript,想独立做完整项目?这套全栈底座就是给前端准备的
前端·后端·全栈
前端Hardy2 小时前
GitHub 爆火!236K+ Star!一套 Skills 让 AI 按工程师方式写代码
前端·后端
烬羽2 小时前
AI Coding 全流程实战:从需求到上线,我用 AI 开发了一个 NPM 包
前端·react.js·ai编程
前进的程序员2 小时前
Codex破局:前端组件秒级生成|提速React/Vue开发,可复用提示词+实战调试经验
前端·vue.js·react.js·codex
前端snow2 小时前
ai agent ---output汇总
前端