CSS 行内块

CSS 布局：display: inline-block

了解 display: inline-block 的工作原理及其在布局中的作用，以及更现代的技术。

inline-block 值

将元素的 display 属性设置为 inline-block 会使其同时具有 inline 和 block 元素的特征：

• 与 inline 元素（<span>、<a>、<img>）类似，它与周围文本一同流动，并且前后不会强制换行。
• 与 block 元素（<div>、<p>、<h1>）类似，你可以设置其 width、height、margin（顶部和底部）和 padding。

这使得 inline-block 对于将类似块的元素并排放置非常有用，而无需诉诸于像 floats 这样的旧技术。

常见用例：创建需要特定尺寸但应并排显示的水平导航菜单或项目网格。

示例：将列表项样式化为 inline blocks 以创建水平菜单：

.nav-list li {
  display: inline-block;
  margin-right: 15px; /* 项目之间的间距 */
  padding: 10px 20px;
  background-color: #eee;
  border: 1px solid #ccc;
}

/* 移除最后一个项目的外边距 */
.nav-list li:last-child {
  margin-right: 0;
}

潜在问题：HTML 中 inline-block 元素之间的空白符（whitespace）会产生视觉上的间隙。在父元素上设置 font-size: 0 并在子元素上重置它，或者在元素之间使用 HTML 注释 <!-- -->，是常见的变通方法，尽管它们可能感觉像是临时凑合的方案。

与旧技术（浮动）的比较

以前，实现并排布局通常涉及使用 float 属性（float: left; 或 float: right;）。虽然功能强大，但 floats 引入了复杂性，主要是之后需要“清除”（clear）浮动，以防止后续元素错误地环绕浮动项。这通常需要额外的 HTML 元素或 CSS“clearfix”技巧。

/* 使用浮动的旧方法（需要清除） */
.box-float {
  float: left;
  width: 150px;
  height: 75px;
  margin: 10px;
  border: 3px solid #8AC007;
}

.clear {
  clear: both; /* 清除浮动，使父容器包含浮动元素 */
}

/* 使用 inline-block（更简单，无需清除） */
.box-inline-block {
  display: inline-block;
  width: 150px;
  height: 75px;
  margin: 10px;
  border: 3px solid #8AC007;
  vertical-align: top; /* 通常需要用于顶部对齐 */
}

inline-block 通过将元素保留在正常的文档流中来简化此问题，从而无需清除浮动。

现代布局技术：Flexbox 与 Grid

虽然 inline-block 对于某些组件很有用，但 CSS Flexbox 和 CSS Grid 是创建健壮、复杂页面布局的现代标准。

• Flexbox (display: flex)：擅长在单维方向（行或列）排列项目，提供强大的对齐和分布能力。非常适合导航栏、组件布局以及内容居中。
• Grid (display: grid)：专为二维布局（同时处理行和列）设计。非常适合整体页面结构、将项目排列成网格系统以及创建复杂、重叠的布局。

与 inline-block 或 float 相比，这些现代模块为大多数布局任务提供了更多控制、灵活性和更清晰的代码。虽然学习 inline-block 很有价值，但强烈建议投入时间学习 Flexbox 和 Grid 以进行现代 Web 开发。

了解更多：

• MDN Flexbox 指南
• MDN Grid 指南