在CSS中，display属性用于定义元素的显示类型（display type），即元素在文档中的布局方式和行为。display属性可以接受多种不同的值，每个值对应一种不同的显示类型。 常见的display属性值包括：
- block：将元素显示为块级元素，独占一行，占据父元素的整个宽度。可以设置宽度、高度、内边距和外边距等属性。
- inline：将元素显示为行内元素，不独占一行，宽度由内容决定，不能设置宽度、高度等块级属性。
- inline-block：将元素显示为行内块级元素，不独占一行，可以设置宽度、高度、内边距和外边距等属性。
- none：将元素隐藏，不占据文档流中的空间，相当于元素不存在。
- flex：将元素显示为弹性盒子容器，可以使用弹性盒子布局（Flexbox）模型来布局元素。
- grid：将元素显示为网格容器，可以使用网格布局（Grid Layout）模型来布局元素。 还有其他一些display属性值，如table（将元素显示为表格）、list-item（将元素显示为列表项）、inline-table（将元素显示为行内表格）等，用于特定的布局需求。 通过设置display属性，可以改变元素的布局方式和行为，实现不同的页面布局效果。需要注意的是，display属性的值有一定的兼容性和语义化的考虑，选择合适的值来符合页面结构和样式的要求。 基础盒模型（Box Model）是CSS中用于布局和定位元素的基本概念。它将每个元素视为一个矩形盒子，由内容区域、内边距、边框和外边距组成。 基础盒模型的组成部分如下：
- 内容区域（Content area）：显示元素的实际内容，包括文本、图像等。内容区域的大小由元素的宽度和高度属性决定。
- 内边距（Padding）：位于内容区域内部，围绕着内容，提供空间用于调整元素的内部间距。内边距的大小由padding属性控制。
- 边框（Border）：围绕着内容区域和内边距，形成一个边框线。边框的样式、宽度和颜色由border属性控制。
- 外边距（Margin）：位于元素的边框外部，提供空间用于与其他元素之间的间距。外边距的大小由margin属性控制。 基础盒模型的计算方式如下： 元素的总宽度 = 左边框宽度 + 左内边距 + 内容区域宽度 + 右内边距 + 右边框宽度 元素的总高度 = 上边框宽度 + 上内边距 + 内容区域高度 + 下内边距 + 下边框宽度 通过设置不同的盒模型属性，可以调整元素的大小、内部间距和边距，从而控制元素的布局和外观。 需要注意的是，CSS中的盒模型有两种不同的模型：标准盒模型（content-box）和IE盒模型（border-box）。在标准盒模型中，元素的宽度和高度仅包括内容区域；而在IE盒模型中，元素的宽度和高度包括内容区域、内边距和边框。可以通过设置box-sizing属性来指定使用哪种盒模型。 行级（Inline）、块级（Block）和表格布局（Table Layout）是CSS中常见的布局方式。
- 行级布局（Inline Layout）：
- 行级元素以行内的方式排列，水平方向上按从左到右的顺序排列。
- 行级元素默认不会独占一行，而是根据内容的大小自动调整宽度。
- 典型的行级元素包括span、a、em、strong等。
- 行级元素可以通过设置display属性为inline或inline-block来实现。
- 块级布局（Block Layout）：
- 块级元素以块级的方式排列，每个块级元素独占一行。
- 块级元素默认占据其父元素的100%宽度，可以设置宽度、高度、内边距和外边距等属性。
- 典型的块级元素包括div、p、h1-h6、ul、li等。
- 块级元素可以通过设置display属性为block来实现。
- 表格布局（Table Layout）：
- 表格布局是通过HTML的table元素和相关的table、tr、td等标签来实现的。
- 表格布局将内容组织成行和列的网格结构，可以实现复杂的表格布局。
- 表格布局提供了许多属性和特性，如单元格合并、对齐、边框样式等。 需要注意的是，表格布局在布局结构上比较复杂，使用不当可能会导致语义化和可访问性的问题。在实现布局时，推荐使用更现代的布局方式，如弹性盒子（Flexbox）和网格布局（Grid Layout），它们提供了更灵活和强大的布局功能。表格布局更适合用于展示真正的表格数据，而不是用于整个页面的布局。 常规流（Normal Flow）是CSS中的一种布局模型，也被称为文档流（Document Flow）。在常规流中，元素按照其在HTML中的顺序和默认的布局规则在页面上流动排列。 常规流布局的特点包括：
- 垂直方向布局：元素按照从上到下的顺序依次排列。在没有其他布局属性干扰的情况下，元素会紧密地垂直排列，每个元素占据一行。
- 水平方向布局：元素默认占据其包含块的100%宽度，沿着左侧边缘对齐。如果有足够的空间，元素会自动换行。
- 元素堆叠：在垂直方向上，元素会依次堆叠在前一个元素的下方。元素的堆叠顺序由其在HTML中的顺序决定。
- 文档流布局：元素的位置和尺寸由其在HTML中的顺序和默认的布局规则决定，可以通过设置盒模型属性（如宽度、高度、内边距、外边距）来影响元素的布局。 在常规流布局中，元素的位置和尺寸默认由其内容的大小决定。元素的宽度默认为自动（即根据内容自动调整），高度也根据内容自动伸缩。 需要注意的是，常规流布局是CSS中最常见的布局方式，也是默认的布局模型。但是，通过使用其他CSS属性（如浮动、定位、弹性盒子和网格布局等），可以改变元素在常规流中的位置和尺寸，实现更复杂的布局效果。
