前言
在 CSS 世界中，每个元素都有一个默认的 display 属性。理解这些元素的显示模式，是解决“为什么我的宽高设置无效？”、“为什么两个 div 不在一行？”等问题的关键。
一、 三大元素显示模式对比
1. 块级元素 (Block Elements)
块级元素就像是积木，默认从上往下堆叠。
-
特点：
- 独占一行：默认占满父容器 100% 宽度。
- 属性全开：支持设置
width、height、margin和padding。 - 嵌套规则：可以包含行内元素和其他块级元素（注意：
p和h1~h6比较特殊，建议不要包裹块级元素）。
-
代表标签：
div,p,h1~h6,ul,ol,li,header,footer,section等。
2. 行内元素 (Inline Elements)
行内元素就像是文本，随内容流动。
-
特点：
- 并排显示：相邻元素在同一行内排列，直到排不下才换行。
- 宽高无效：设置
width和height不起作用，宽度由内容撑开。 - 间距局限：水平方向的
margin和padding有效；垂直方向无效（不占据空间，但可能背景会溢出）。
-
代表标签：
span,a,strong,em,i,label。
3. 行内块元素 (Inline-Block)
结合了前两者的优点，既能并排显示，又能设置宽高。
-
特点：
- 并排排列：不独占一行。
- 属性支持：支持设置
width、height、margin和padding。
-
代表标签：
img,input,button,textarea,select。注：这些元素在 CSS 规范中被称为“可替换元素”，它们天生具有行内块的特性。
二、 inline-block 的“间隙之谜”
1. 产生原因
当你给子元素设置 display: inline-block 时，HTML 代码中标签之间的空格或换行符会被浏览器解析为一个约 4px 的空白字符。
2. 解决方案
-
方法 A：父元素设置
font-size: 0（最常用）.parent { font-size: 0; } .child { display: inline-block; font-size: 14px; } /* 子元素需手动恢复字号 */ -
方法 B：标签首尾相接（代码极丑，不推荐）
<div class="child">A</div><div class="child">B</div> -
方法 C：改用 Flex 布局（现代开发首选）
.parent { display: flex; } /* 彻底告别间隙问题 */
三、 空元素 (Void Elements)
空元素是指没有子节点且没有结束标签的元素，它们通常通过属性来承载内容。
- 常见标签：
<br>,<hr>,<img>,<input>,<link>,<meta>。
四、 面试模拟题
Q1：如何让行内元素（如 span）支持宽高？
参考回答：
- 修改
display属性为block或inline-block。 - 设置
float（浮动后的元素会自动变为块级表现）。 - 设置
position: absolute或fixed。
Q2：img 标签是行内元素还是块级元素？为什么它可以设置宽高？
参考回答： img 在表现上属于行内元素（不换行），但它是一个可替换元素（Replaced element） 。可替换元素的内容不受 CSS 控制，其外观由标签属性决定。浏览器在渲染这类元素时，会赋予它们类似 inline-block 的特性，因此可以设置宽高。
Q3：display: none 和 visibility: hidden 有什么区别？
参考回答：
display: none：脱离文档流，不占据空间，会引起回流（Reflow）。visibility: hidden：隐藏内容，但保留占据的物理空间，不会引起回流，仅引起重绘（Repaint）。
