内联盒模型基本概念？——前端面试中的隐形考点剖析

导语

在前端开发中，盒模型是基础知识，但“内联盒模型”往往容易被忽视。它不是“能不能写出页面”的问题，而是“写出的页面为何错位、如何精准定位”的问题。很多面试官会借这个考点，判断候选人对浏览器渲染机制的理解是否深入。本文将带你全面搞懂内联盒模型，助你在面试中脱颖而出。

---

一、面试主题概述

盒模型是前端面试中的高频知识点，分为块级盒模型（Block box）和内联盒模型（Inline box）。大部分人熟悉块级盒模型的结构：content + padding + border + margin，但对内联盒模型中的匿名盒子、行盒、行高对齐机制等渲染细节理解模糊。

尤其在处理文本布局、图文混排、垂直对齐等场景时，内联盒模型的知识就变得尤为关键。

---

二、高频面试题汇总

1. 什么是内联盒模型？与块级盒模型有何区别？
2. 行内元素为何无法设置 width 和 height？
3. 什么是匿名行盒？它的作用是什么？
4. 行高（line-height）如何影响内联元素的垂直对齐？
5. 如何实现多行文本垂直居中对齐图片？

---

三、重点题目详解

题目一：

什么是内联盒模型？与块级盒模型的主要区别是什么？

参考答案：

内联盒模型是浏览器为内联元素（如 span、a、strong）生成的布局模型。它的特点是：

• 水平方向排列，直到一行装不下换行；
• 默认无法设置 width 和 height；
• 可设置 padding 和 margin，但上下方向可能不生效；
• 会受 line-height 和 vertical-align 的影响。

而块级盒模型用于块级元素（如 div、p），是完整矩形盒子，支持完整的 box model 属性控制。

代码示例：

<p>
  <span style="background:yellow; padding:10px; margin:10px