清晨的阳光透过窗户洒进来，泡上一杯温热的咖啡，翻开这篇文章，就像和老友聊聊天。前端面试里那些让人紧张的题目，今天咱们慢慢聊，把晦涩的知识点变成轻松有趣的小故事，让学习也成为晨间惬意的时光～

面试题：display: block和display: inline这两个 CSS 属性在 HTML 元素上有什么区别？实际应用场景有哪些？

不少小伙伴在面试时，一碰到这类基础但又容易混淆的问题，心里就开始打鼓。别着急，咱们把这两个属性比作不同性格的 “小伙伴”，一下子就能明白它们的不同之处啦。

display: block：独立的 “小房间” 选手

<!-- div是典型的块级元素，默认display: block -->
<div style="background-color: lightblue; width: 200px; height: 100px;">
我是块级元素，独占一行
</div>
<div style="background-color: lightgreen; width: 200px; height: 100px;">
我也是块级元素，在新的一行
</div>
<!-- 注释：块级元素会独占一行，设置的宽度和高度生效，
并且可以容纳其他块级元素和行内元素 -->

display: block就像一个个独立的 “小房间”，每个块级元素都会从新的一行开始，并且会尽可能地占据父元素的宽度。它们有自己的宽度和高度，可以随意设置，就像你可以自由布置房间的大小。常见的<div>、<p>、<h1>-<h6>等元素，默认都是display: block。在实际开发中，用它来搭建页面的整体布局再合适不过了，比如搭建导航栏、侧边栏，每个部分都能独立分开，互不干扰。

display: inline：亲密的 “小跟班” 选手

<!-- span是典型的行内元素，默认display: inline -->
<span style="background-color: pink;">我是行内元素</span>
<span style="background-color: lightyellow;">我也在同一行</span>
<!-- 注释：行内元素不会独占一行，会和其他行内元素在同一行排列，
并且设置宽度和高度无效，其宽高由内容撑开 -->

display: inline就像一群亲密的 “小跟班”，它们不会独占一行，而是紧紧挨在一起，共享同一行的空间。和块级元素不同，行内元素设置宽度和高度是没有效果的，它们的大小会根据内容自动调整。像<span>、<a>、<img>（默认可替换行内元素）等都是display: inline或类似特性。在实际应用中，当你想给文本中的部分内容添加样式，或者做一些小图标、超链接的排列时，display: inline就能派上大用场。

面试回答范本

“面试官您好！display: block和display: inline主要有三点区别。首先是排列方式，block元素像独立小房间，独占一行；inline元素像亲密小跟班，共享一行。其次是尺寸控制，block元素能随意设置宽高；inline元素的宽高由内容决定，设置了也没用。最后是容纳能力，block元素能装其他块级和行内元素，inline元素一般只能装文本和其他行内元素。实际开发里，用block搭页面大框架，比如布局导航栏；用inline处理文本样式、排列小图标，这样搭配着用，页面结构又清晰，样式又好看。”

在响应式布局中，display: block和display: inline谁更有用？

有人觉得display: block配合media query能灵活控制布局变化，是响应式布局的主力军；也有人认为display: inline在处理小屏幕文本和图标排列时更得心应手。各位前端开发者，你在做响应式项目时更偏爱谁呢？快来评论区分享你的实战经验，一起聊聊这个有趣的话题吧！

Tags：span是行内元素吗

微信扫一扫：分享

微信里点“发现”，扫一下

二维码便可将本文分享至朋友圈。