Display

• flex
• Grid
  CSS 的 display 属性用于设置元素的显示类型，决定了元素如何在页面上呈现以及如何与其他元素交互。以下是一些常见的 display 属性值：

基本类型

• block
  • 元素会占据整行的空间，其宽度默认为父元素的宽度。
  • 可以设置宽度和高度。
  • 例如：<div>、<p> 等默认为 block。
• inline
  • 元素不会占据整行，会与其他元素在一行内显示。
  • 不能设置宽度和高度。
  • 例如：<span>、<a> 等默认为 inline。
• inline-block
  • 元素会与其他元素在一行内显示，但可以设置宽度和高度。
  • 例如：可以用于图标或小的按钮等。

flexbox

• flex
  • 使元素成为 Flex 容器，可以使用 Flexbox 布局。
  • 子元素会按照 Flexbox 的规则排列。
  • 例如：用于创建响应式布局或对齐元素。

Grid

• grid
  • 使元素成为 Grid 容器，可以使用 CSS Grid 布局。
  • 子元素会按照 Grid 的规则排列。
  • 例如：用于创建复杂的网格布局.

其他类型

• none
  • 元素不会显示在页面上，也不会占据任何空间。
  • 例如：用于隐藏元素但不从文档流中移除。
• table、table-row、table-cell 等
  • 用于模拟表格布局，类似于 HTML 表格元素的显示方式。

示例

.block-element {
  display: block;
  width: 100px;
  height: 100px;
}
.inline-element {
  display: inline;
}
.inline-block-element {
  display: inline-block;
  width: 100px;
  height: 100px;
}
.flex-container {
  display: flex;
}
.grid-container {
  display: grid;
}

通过合理使用 display 属性，可以有效地控制元素的布局和显示方式，从而实现各种页面设计需求.

行内元素和块级元素的区别

行内元素（inline）和块级元素（block）是 HTML 中两种基本的元素类型，它们在布局和行为上有显著的区别：

块级元素（Block-level Elements）

• 占据整行
  • 块级元素会占据整行的空间，即使它们的内容不需要这么多空间。它们会自动换行，使得后续的块级元素出现在下一行。
• 可以设置宽度和高度
  • 块级元素可以设置宽度（width）和高度（height）属性，且这些属性会生效。
• 默认宽度
  • 如果不设置宽度，块级元素的默认宽度通常是其父元素的宽度。
• 垂直对齐
  • 块级元素可以使用垂直对齐属性（如 vertical-align），但通常用于与其他块级元素对齐。
• 示例元素
  • <div>、<p>、<h1> 到 <h6>、<ul>、<ol>、<li>、<table> 等。

行内元素（Inline Elements）

• 不占据整行
  • 行内元素不会占据整行，它们会与其他行内元素在同一行内显示，直到达到行的末尾或遇到换行符。
• 不能设置宽度和高度
  • 行内元素的宽度和高度由其内容决定，不能通过 CSS 显式设置。
• 默认宽度
  • 行内元素的宽度是其内容的宽度。
• 垂直对齐
  • 行内元素可以使用 vertical-align 属性来控制其在行内的垂直对齐方式（如 top、middle、bottom 等）。
• 示例元素
  • <span>、<a>、<strong>、<em>、<img>、<input> 等。

转换

• 通过 CSS 转换
  • 可以通过 CSS 的 display 属性将块级元素转换为行内元素，反之亦然。例如：

    div {
      display: inline; /* 将块级元素转换为行内元素 */
    }
    span {
      display: block; /* 将行内元素转换为块级元素 */
    }

使用场景

• 块级元素
  • 适合用于创建较大的结构块，如段落、列表、表格等。
• 行内元素
  • 适合用于标记文本中的小部分，如强调、链接、图片等。
    通过理解行内元素和块级元素的区别，可以更好地控制页面布局和元素的显示方式，从而实现更灵活和有效的页面设计.