display 是 CSS 中关键的布局属性，用于定义元素生成盒模型的类型。在 HTML 文档中，若不加注意地使用 display，可能破坏既定的结构层次，影响语义和渲染效果。因此，必须清楚掌握不同属性值所对应的显示行为与布局方式，合理控制元素的呈现形式，以确保页面结构正确、样式稳定，避免产生不可预期的视觉错乱或兼容性问题。
1、 display属性包含多种取值，最常用的是block、inline和inline-block三种类型。这三类在实际开发中应用广泛，因此我们主要介绍它们的使用方法与特点。其他类型的display值虽不常使用，但同样具有特定功能，感兴趣者可查阅CSS官方文档进行深入学习和探索。
2、 块级元素可独占一行显示，能设置宽度和高度，并可叠加排列在其他元素之上。
3、 与块级元素相反，行内元素会随着文本自然流动，与周围文字及其他行内元素共处一行，其内容也像普通文字段落一样随文字换行而折行。对行内元素设置宽度和高度不起作用，其尺寸由内部内容决定，无法通过样式直接控制宽高属性。
4、 内联盒子不会另起一行，能设置宽度和高度，像行内元素一样随文字流动，且在段落中不会换行断开。
5、 具体代码如下：
6、 测试 display 属性的显示效果
7、 7
8、 块级元素可独占一行，能设置宽度和高度，通常用于布局中堆叠排列的容器。
9、 块级元素是指能够独占一行显示并可设置宽高的容器，通常用于组织页面结构，其内容会自动换行，且能包含其他元素或嵌套布局。
10、 宽度和高度。
11、 13区块是指可设置宽度和高度，并能堆叠在其他元素之上的框，其内容通常独占一行。
12、 15
13、 inline与block相反，表现为随文本流自然排列，能与周围文字及其他行内元素共处一行，其内容如同段落文字一般随行流动、自动换行。由于其特性属于行内布局，因此无法对inline盒模型设置有效的宽度和高度，尺寸由内容本身决定。
14、 inline与block相反，表现为随文本流自然排列，能与周围文字及其他行内元素共处一行，其内容如同段落中的字符一样随文本流动而换行。由于行内元素的特性，无法对其设置宽度和高度，这些样式属性不会产生实际效果，布局上主要依从文字走向，常用于强调、链接等不需要独立占行的场景。
15、 inline与block相反，它会随文本流自然排列，与周围文字及其他行内元素共处一行，内容如同段落中的文字一样随行换行。对行内元素设置宽度和高度无效，其尺寸由内容本身决定，无法通过CSS直接控制其宽高属性。
16、 21
17、 23行内盒子：不另起新行，可设宽高，随文字流自然排列，且不会在段落中换行断开，兼具行内元素特性与尺寸控制能力。
18、 。
19、 内联块元素（inline-box）不会另起新行，可随周围文字流动，同时支持设置宽度和高度，具备块级元素的部分特性。它在文本行中表现为内联元素，但不会因换行而中断显示，能够保持完整呈现，适用于需要控制尺寸且不打断文本流的场景。
20、 内联盒子不会另起一行，可随周围文字流动，支持设置宽度和高度，且不会独占段落行。
21、 连接中断。
22、 4 }
23、 5
24、 11
25、 15
26、 19
27、 23
28、 保存文件后，用Chrome或其他浏览器打开index.html，即可查看最终效果。你还可以继续修改代码，保存后刷新页面，实时观察变化。
