HTML+CSS中常用的布局

在 CSS 中，display 属性用于设置元素的显示类型，控制元素的布局行为。不同的 display 值决定了元素如何排列和影响其周围的其他元素。以下是 display 属性的一些常见值及其含义和用途：

1. block

• 描述：使元素成为块级元素，块级元素通常会占据一整行，并且具有上下外边距。
• 用途：用于实现布局中的容器，如<div>、<section>、<p>等。

display:block页面效果 

• 特点：会换行，宽度默认占满父容器。

2. inline

• 描述：使元素成为行内元素，行内元素不会换行，且宽度仅为其内容的宽度。
• 用途：用于布局中的文本或小块内容，如<span>、<a>、<strong>等。

 display:inline页面效果 

• 特点：不会占满一整行，宽度由内容决定。

3. inline-block

• 描述：结合了inline和block的特性，元素在同一行内显示，但可以设置宽高。
• 用途：当你需要多个元素在同一行显示并且需要设置宽高时（例如，导航栏、图片排列等）。

 display:inline-block页面效果 

• 特点：元素在行内排列，可以设置宽高，但不会换行。

4. flex

• 描述：使元素成为一个灵活的容器。子元素成为灵活项，能够根据可用空间自动调整大小。Flexbox 布局使得水平和垂直对齐变得非常简单。
• 用途：用于构建复杂的响应式布局，如导航栏、卡片布局、表格布局等。

display:flex页面效果  

• 特点：子元素排列方式非常灵活，可以控制方向、对齐方式、排列顺序等。

5. grid

• 描述：使元素成为一个网格容器，允许子元素根据网格线进行排列。Grid 布局支持二维布局，可以同时控制行和列。
• 用途：用于复杂的二维布局，如页面模板、图形界面等。

 display:grid页面效果

• 特点：适合二维布局，支持行和列的排列与对齐，具有更强的控制力。

6. none

• 描述：元素不会显示，不占据页面空间，完全从文档流中消失。
• 用途：用于动态隐藏元素。

  display:none页面效果

• 特点：该元素将不占据任何空间，页面上的其他元素将填充其位置。

7. list-item

• 描述：使元素成为列表项，通常与<ul>、<ol>等结合使用。
• 用途：用于无序列表或有序列表项。

display:list-item页面效果 

• 特点：会生成一个列表项，通常前面有一个项目符号或数字。

8. table，table-row，table-cell，table-caption

• table：描述：使元素成为表格容器，表现为类似 <table> 的行为。
• 用途：用于表格布局。
• 特点：元素表现为表格（<table>），可以包含表格行、列、单元格等。
• table-row：描述：使元素表现为表格行，类似于 <tr>。
• 用途：用于表格布局，特别是在使用 CSS 创建表格时。
• 特点：该元素会表现为一行，包含表格单元格。
• table-cell：描述：使元素表现为表格单元格，类似于 <td>。
• 用途：用于表格布局，特别是在使用 CSS 创建表格时。
• 特点：该元素会表现为表格单元格，可以包含内容并显示在表格中。
• table-caption：描述：使元素表现为表格的标题（<caption>）。
• 用途：为表格添加标题。
• 特点：该元素表现为表格的标题，通常位于表格的顶部或底部。

 

 table，table-row，table-cell，table-caption效果

9. sticky

• 描述：使元素根据用户滚动位置进行固定，当滚动到一定位置时，元素会变为固定定位（position: fixed）。
• 用途：用于固定表头、菜单等，随着页面滚动而“粘住”。

 sticky效果

• 特点：元素会在滚动到一定位置时保持固定，而不是完全脱离文档流。

总结

• 块级元素：block、flex、grid、table等。
• 行内元素：inline、inline-block等。
• 隐藏元素：none。
• 表格相关布局：table、table-row、table-cell等。

在实际应用中，flex 和 grid 是现代布局中最常用的方式，能提供更灵活的布局控制。