@wpcfan 2024-08-02T20:39:59.000000Z 字数 15760 阅读 100

CSS基本功从头练之布局

css html web flex

CSS的display属性是控制元素布局的核心属性之一。虽然这个属性已经存在很久，但很多人（包括我自己）都没有系统地去学习过它。在这篇文章中，我将系统地梳理一下display属性的各种值，并通过实例来演示它们的效果。希望这篇文章能对大家有所帮助。

block

display: block 元素占据其父元素的整个宽度，并且会自动换行。它们通常用于结构性布局和容器元素。

<!DOCTYPE html>
<html>
<head>
  <style>
    .block {
      display: block;
      width: 100%;
      background-color: #DCEDC8;
    }
  </style>
</head>
<body>
  <div class="block">这是一个块级元素</div>
  <p class="block">这是另一个块级元素</p>
</body>
</html>

Block显示效果

在这个示例中，两个元素都被设置为 block，因此它们各自独占一行，并填满父容器的宽度。

常见的场景：

布局容器：
用于包含和排列其他元素，如 <div>、<section>、<article> 等。
标题：
用于定义文档结构，如 <h1> 到 <h6> 标签。
段落：
用于包含文本内容，如 <p> 标签。
列表：
用于创建列表，如 <ul>、<ol> 和 <li> 标签。
表单元素：
用于创建表单的结构和布局，如 <form>、<fieldset>、<legend> 标签。

示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    .block-element {
      background-color: #e0f7fa;
      padding: 20px;
      margin: 10px 0;
    }
  </style>
</head>
<body>
  <div class="block-element">This is a block-level element.</div>
  <h1 class="block-element">This is a heading.</h1>
  <p class="block-element">This is a paragraph.</p>
  <ul class="block-element">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
</body>
</html>

Block 级别元素

inline

inline是display属性的另一个重要值。将元素的display属性设置为inline，该元素将与相邻的元素在同一行显示。常见的行内元素包括<span>、<a>、<strong>等。如下所示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS Display</title>
  <style>
    .inline-element {
      display: inline;
      background-color: #d9edf7;
      margin: 10px;
      padding: 10px;
    }
  </style>
</head>
<body>
  <span class="inline-element">这是一个行内元素。</span>
  <a href="#" class="inline-element">这是另一个行内元素。</a>
</body>
</html>

inline 效果

在上面的示例中，<span>和<a>元素都被设置为行内元素，它们在同一行内显示。

display: inline 元素只占据其内容的宽度，并且不会自动换行。它们通常用于文本内联和小型结构性元素。

常见的场景：

文本格式化：
用于格式化文本，如 <span>、<a>、<em>、<strong> 标签。
图标：
用于插入图标或小图形，如 <img> 标签。
表单控件：
用于内联的表单控件，如 <input>、<label>、<button> 标签。

示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    .inline-element {
      background-color: #ffecb3;
      padding: 5px;
    }
  </style>
</head>
<body>
  <p>
    This is a paragraph with <span class="inline-element">inline</span> elements.
    Here is an <a href="#" class="inline-element">inline link</a>.
    And here is an <em class="inline-element">emphasized text</em>.
  </p>
</body>
</html>

富文本效果

inline 元素不能直接设置宽度和高度。虽然可以在 CSS 中指定 width 和 height，但这些属性不会对 inline 元素产生预期的效果。inline 元素的宽度和高度通常由其内容决定，并且不会像 block 元素那样响应 width 和 height 设置。

<!DOCTYPE html>
<html>
<head>
  <style>
    .inline-element {
      display: inline;
      width: 200px;  /* 不会生效 */
      height: 100px; /* 不会生效 */
      background-color: #ffeb3b;
    }
  </style>
</head>
<body>
  <span class="inline-element">This is an inline element.</span>
  <span class="inline-element">Another inline element.</span>
</body>
</html>

inline-block

inline-block结合了block和inline的特性。将元素的display属性设置为inline-block，该元素可以像行内元素一样与相邻元素在同一行显示，但同时可以像块级元素一样设置宽高。如下所示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS Display</title>
  <style>
    .inline-block-element {
      display: inline-block;
      background-color: #d1ecf1;
      margin: 10px;
      padding: 10px;
      width: 100px;
    }
  </style>
</head>
<body>
  <div class="inline-block-element">Inline-block Element 1</div>
  <div class="inline-block-element">Inline-block Element 2</div>
  <div class="inline-block-element">Inline-block Element 3</div>
</body>
</html>

在上面的示例中，.inline-block-element被设置为行内块级元素，它们在同一行内显示，但同时可以设置宽高和内外边距。

inline-block示例

`display: inline-block` 的特点

内联布局：与 inline 元素一样，它们在同一行内显示，不会自动换行。
可设置宽高：与 block 元素一样，可以设置宽度和高度。
不占据整行：不像 block 元素，它们只占据自身内容的宽度。

常见的应用场景

内联列表项：
用于在同一行内显示列表项，如导航菜单或图标列表。
按钮排列：
用于在同一行内排列多个按钮或表单控件。
图像和文本对齐：
用于图像和文本在同一行内对齐。
内联容器：
用于创建可以调整尺寸但仍然保持内联特性的容器。

内联列表项示例

<!DOCTYPE html>
<html>
<head>
  <style>
    .nav-item {
      display: inline-block;
      padding: 10px 20px;
      background-color: #81d4fa;
      margin: 5px;
    }
  </style>
</head>
<body>
  <ul>
    <li class="nav-item">Home</li>
    <li class="nav-item">About</li>
    <li class="nav-item">Services</li>
    <li class="nav-item">Contact</li>
  </ul>
</body>
</html>

在这个示例中，ul 列表中的每个 li 元素被设置为 display: inline-block，它们在同一行内显示，形成一个水平导航菜单。

变更列表为水平

按钮排列示例

<!DOCTYPE html>
<html>
<head>
  <style>
    .button {
      display: inline-block;
      padding: 10px 20px;
      background-color: #ffab91;
      color: white;
      text-align: center;
      margin: 5px;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <div class="button">Button 1</div>
  <div class="button">Button 2</div>
  <div class="button">Button 3</div>
</body>
</html>

在这个示例中，三个 div 元素被设置为 display: inline-block，它们在同一行内排列，形成一个水平按钮组。

水平按钮组示例

总结

display: inline-block：结合了 block 和 inline 元素的优点，既能在同一行内排列，又能设置宽度和高度。
常见应用场景：内联列表项、按钮排列、图像和文本对齐、内联容器。

通过使用 inline-block，可以实现复杂的内联布局，同时保持灵活的尺寸调整。

none

none将元素隐藏，使其不在页面中显示。如下所示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS Display</title>
  <style>
    .none-element {
      display: none;
    }
  </style>
</head>
<body>
  <div class="none-element">这个元素被隐藏了。</div>
  <div>这个元素没有被隐藏。</div>
</body>
</html>

在上面的示例中，.none-element被设置为none，因此它不会在页面中显示。

display: none 和 visibility: hidden 都是用于隐藏元素的 CSS 属性，但它们有一些重要的区别：

`display: none`

元素不占据空间：
- 当你使用 display: none 时，元素会完全从文档流中移除，因此不会占据任何空间。
- 其他元素将会像该元素不存在一样重新布局。
无法交互：
- 隐藏的元素无法被用户点击或交互。
子元素也被隐藏：
- 元素及其所有子元素都会被隐藏。
影响页面的性能：
- 如果有大量元素被设置为 display: none，页面的重新布局和渲染可能会变慢，因为浏览器必须重新计算布局。

`visibility: hidden`

元素占据空间：
- 当你使用 visibility: hidden 时，元素仍然保留在文档流中，占据原来的空间，但不会被显示。
- 其他元素不会重新布局。
无法交互：
- 隐藏的元素无法被用户点击或交互。
子元素不会被隐藏：
- 元素本身会被隐藏，但它的子元素仍然可以设置为可见，例如 visibility: visible。
较少的重排和重绘：
- 与 display: none 相比，visibility: hidden 只需要重绘 (repaint) 而不需要重排 (reflow)，性能开销较小。

举例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .display-none {
    display: none;
  }
  .visibility-hidden {
    visibility: hidden;
  }
  .container {
    border: 1px solid black;
    padding: 10px;
    margin: 20px;
  }
</style>
<title>CSS Visibility</title>
</head>
<body>
<div class="container">
  <div class="display-none">This is hidden with display: none</div>
  <div class="visibility-hidden">This is hidden with visibility: hidden</div>
  <div>This is visible</div>
</div>
</body>
</html>

总结

display: none 完全移除元素，不占据空间，适用于需要完全隐藏并移除的场景。
visibility: hidden 隐藏元素但仍占据空间，适用于需要隐藏元素但保持布局的场景。

flex

Flexbox 简介

Flexbox（Flexible Box）布局模型是一种一维布局模型，主要用于在容器中分配空间并对齐内容。它可以使复杂的布局变得更加简单和直观，尤其是在处理元素的对齐、分配空间以及响应式设计时。

弹性容器和弹性项目

在 Flexbox 布局中，有两个重要的概念：弹性容器（flex container）和弹性项目（flex item）。设置 display: flex 的元素称为弹性容器，容器内的直接子元素称为弹性项目。

示例

<!DOCTYPE html>
<html>
<head>
  <style>
    .flex-container {
      display: flex;
      background-color: #e0f7fa;
      padding: 20px;
    }
    .flex-item {
      background-color: #00695c;
      color: white;
      padding: 20px;
      margin: 5px;
    }
  </style>
</head>
<body>
  <div class="flex-container">
    <div class="flex-item">Item 1</div>
    <div class="flex-item">Item 2</div>
    <div class="flex-item">Item 3</div>
  </div>
</body>
</html>

Flex 示例

关键属性

flex-direction

flex-direction 属性定义了主轴的方向，可以是 row（默认）、row-reverse、column 或 column-reverse。

示例

<!DOCTYPE html>
<html>
<head>
  <style>
    .flex-container-row {
      display: flex;
      flex-direction: row;
      background-color: #e0f7fa;
      padding: 20px;
    }
    .flex-container-column {
      display: flex;
      flex-direction: column;
      background-color: #ffecb3;
      padding: 20px;
      height: 200px;
    }
    .flex-item {
      background-color: #00695c;
      color: white;
      padding: 20px;
      margin: 5px;
    }
  </style>
</head>
<body>
  <div class="flex-container-row">
    <div class="flex-item">Row Item 1</div>
    <div class="flex-item">Row Item 2</div>
    <div class="flex-item">Row Item 3</div>
  </div>
  <div class="flex-container-column">
    <div class="flex-item">Column Item 1</div>
    <div class="flex-item">Column Item 2</div>
    <div class="flex-item">Column Item 3</div>
  </div>
</body>
</html>

方向的示例

justify-content

justify-content 属性用于定义项目在主轴上的对齐方式，包括 flex-start、flex-end、center、space-between 和 space-around 等。

1. `flex-start`

项目从主轴的起点开始排列，彼此紧挨在一起。

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      justify-content: flex-start;
      border: 2px solid #4caf50;
      height: 100px;
      width: 400px;
    }
    .item {
      background-color: #ffeb3b;
      border: 1px solid #000;
      padding: 20px;
      margin: 5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</body>
</html>

在这个示例中，所有项目都从容器的左边缘开始排列。

flex-start示例

2. `flex-end`

项目从主轴的终点开始排列，彼此紧挨在一起。

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      justify-content: flex-end;
      border: 2px solid #4caf50;
      height: 100px;
      width: 400px;
    }
    .item {
      background-color: #ffeb3b;
      border: 1px solid #000;
      padding: 20px;
      margin: 5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</body>
</html>

在这个示例中，所有项目都从容器的右边缘开始排列。

flex-end

3. `center`

项目在主轴上居中排列。

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      justify-content: center;
      border: 2px solid #4caf50;
      height: 100px;
      width: 400px;
    }
    .item {
      background-color: #ffeb3b;
      border: 1px solid #000;
      padding: 20px;
      margin: 5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</body>
</html>

在这个示例中，所有项目都在容器中水平居中排列。

center

4. `space-between`

项目在主轴上均匀分布，第一个项目在起点，最后一个项目在终点，项目之间的间隔相等。

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      justify-content: space-between;
      border: 2px solid #4caf50;
      height: 100px;
      width: 400px;
    }
    .item {
      background-color: #ffeb3b;
      border: 1px solid #000;
      padding: 20px;
      margin: 5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</body>
</html>

在这个示例中，第一个项目在左边缘，最后一个项目在右边缘，所有项目之间的间隔相等。

space-between

5. `space-around`

项目在主轴上均匀分布，项目之间的间隔相等，项目与容器边缘之间的间隔为项目之间间隔的一半。

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      justify-content: space-around;
      border: 2px solid #4caf50;
      height: 100px;
      width: 400px;
    }
    .item {
      background-color: #ffeb3b;
      border: 1px solid #000;
      padding: 20px;
      margin: 5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</body>
</html>

在这个示例中，所有项目之间的间隔相等，且项目与容器边缘之间的间隔为项目之间间隔的一半。

space-around

6. `space-evenly`

项目在主轴上均匀分布，包括项目与容器边缘之间的间隔在内，所有间隔都相等。

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      justify-content: space-evenly;
      border: 2px solid #4caf50;
      height: 100px;
      width: 600px;
    }
    .item {
      background-color: #ffeb3b;
      border: 1px solid #000;
      padding: 20px;
      margin: 5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
  </div>
</body>
</html>

在这个示例中，所有项目之间以及项目与容器边缘之间的间隔都相等。

它和 space-around 是有些区别的，但需要空间足够大才能比较明显，比如

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      justify-content: space-around;
      border: 2px solid #4caf50;
      height: 100px;
      width: 600px;
    }
    .item {
      background-color: #ffeb3b;
      border: 1px solid #000;
      padding: 20px;
      margin: 5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
  </div>
</body>
</html>

这些示例展示了不同的 justify-content 设置如何影响项目在主轴上的对齐方式。通过这些例子，你可以更好地理解和应用 Flexbox 布局中的对齐技巧。

align-items

align-items 属性用于定义项目在交叉轴上的对齐方式，包括 flex-start、flex-end、center、baseline 和 stretch 等。

align-items 属性用于定义项目在交叉轴上的对齐方式。主要的取值包括 flex-start、flex-end、center、baseline 和 stretch。以下是每种取值的详细解释和示例：

1. `flex-start`

项目在交叉轴上向起点对齐。

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      align-items: flex-start;
      flex-wrap: wrap;
      height: 200px;
      width: 300px;
      border: 2px solid #4caf50;
    }
    .item {
      background-color: #ffeb3b;
      border: 1px solid #000;
      padding: 20px;
      margin: 5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
  </div>
</body>
</html>

flex-start

2. `flex-end`

项目在交叉轴上向终点对齐。

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      align-items: flex-end;
      flex-wrap: wrap;
      height: 200px;
      width: 300px;
      border: 2px solid #4caf50;
    }
    .item {
      background-color: #ffeb3b;
      border: 1px solid #000;
      padding: 20px;
      margin: 5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
  </div>
</body>
</html>

3. `center`

项目在交叉轴上居中对齐。

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      height: 200px;
      width: 300px;
      border: 2px solid #4caf50;
    }
    .item {
      background-color: #ffeb3b;
      border: 1px solid #000;
      padding: 20px;
      margin: 5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
  </div>
</body>
</html>

4. `baseline`

项目在交叉轴上以其第一行文字的基线对齐。

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      flex-direction: row;
      align-items: baseline;
      flex-wrap: wrap;
      height: 300px;
      width: 300px;
      border: 2px solid #4caf50;
    }
    .item {
      background-color: #ffeb3b;
      border: 1px solid #000;
      padding: 20px;
      margin: 5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1...more.more.more.more.</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3...</div>
    <div class="item">Item 4...</div>
    <div class="item">Item 5</div>
  </div>
</body>
</html>

5. `stretch`

项目在交叉轴上被拉伸以填满容器（默认值）。

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      flex-direction: row;
      align-items: stretch;
      flex-wrap: wrap;
      height: 300px;
      width: 300px;
      border: 2px solid #4caf50;
    }
    .item {
      background-color: #ffeb3b;
      border: 1px solid #000;
      padding: 20px;
      margin: 5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1...more.more.more.more.</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3...</div>
    <div class="item">Item 4...</div>
    <div class="item">Item 5</div>
  </div>
</body>
</html>

通过这些示例，可以清晰地看到 align-items 属性的不同取值在交叉轴上如何影响项目的对齐方式。

主轴和交叉轴示例

在 Flexbox 布局中，主轴（main axis）是沿着 flex-direction 属性指定的方向排列的轴，而交叉轴（cross axis）是与主轴垂直的轴。了解主轴和交叉轴的概念可以帮助我们更好地掌握 Flexbox 的布局技巧。

示例 1：水平主轴和垂直交叉轴

默认情况下，flex-direction 是 row，即主轴是水平方向，交叉轴是垂直方向。

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      border: 2px solid #4caf50;
      height: 200px;
      width: 400px;
    }
    .item {
      background-color: #ffeb3b;
      border: 1px solid #000;
      padding: 20px;
      margin: 5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</body>
</html>

在这个示例中，.container 的 flex-direction 是默认的 row，因此子元素在水平主轴上排列。

示例 2：垂直主轴和水平交叉轴

将 flex-direction 设置为 column，主轴变为垂直方向，交叉轴变为水平方向。

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      flex-direction: column;
      border: 2px solid #4caf50;
      height: 400px;
      width: 200px;
    }
    .item {
      background-color: #ffeb3b;
      border: 1px solid #000;
      padding: 20px;
      margin: 5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</body>
</html>

在这个示例中，.container 的 flex-direction 被设置为 column，因此子元素在垂直主轴上排列。

高级 Flexbox 技巧

换行

flex-wrap 属性允许项目换行，当项目超出容器的宽度时，可以换行显示。值包括 nowrap（默认）、wrap 和 wrap-reverse。

示例

<!DOCTYPE html>
<html>
<head>
  <style>
    .flex-container {
      display: flex;
      flex-wrap: wrap;
      background-color: #e0f7fa;
      padding: 20px;
    }
    .flex-item {
      background-color: #00695c;
      color: white;
      padding: 20px;
      margin: 5px;
      width: 30%;
    }
  </style>
</head>
<body>
  <div class="flex-container">
    <div class="flex-item">Item 1</div>
    <div class="flex-item">Item 2</div>
    <div class="flex-item">Item 3</div>
    <div class="flex-item">Item 4</div>
    <div class="flex-item">Item 5</div>
    <div class="flex-item">Item 6</div>
  </div>
</body>
</html>

排序

order 属性定义项目的排列顺序，默认为 0。值越小，项目排列越靠前。

示例

<!DOCTYPE html>
<html>
<head>
  <style>
    .flex-container {
      display: flex;
      background-color: #e0f7fa;
      padding: 20px;
    }
    .flex-item {
      background-color: #00695c;
      color: white;
      padding: 20px;
      margin: 5px;
    }
    .first {
      order: 1;
    }
    .second {
      order: 3;
    }
    .third {
      order: 2;
    }
  </style>
</head>
<body>
  <div class="flex-container">
    <div class="flex-item first">Item 1</div>
    <div class="flex-item second">Item 2</div>
    <div class="flex-item third">Item 3</div>
  </div>
</body>
</html>

对齐

align-self 属性允许单个项目在交叉轴上独立对齐，覆盖 align-items 属性的设置。

示例

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      flex-direction: row;
      align-items: stretch;
      flex-wrap: wrap;
      height: 300px;
      width: 300px;
      border: 2px solid #4caf50;
    }
    .item {
      background-color: #ffeb3b;
      border: 1px solid #000;
      padding: 20px;
      margin: 5px;
    }
    .aligned {
      align-self: flex-end;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1...more.more.more.more.</div>
    <div class="item">Item 2</div>
    <div class="item aligned">Item 3...</div>
    <div class="item">Item 4...</div>
    <div class="item">Item 5</div>
  </div>
</body>
</html>

通过这些示例，您可以看到 Flexbox 如何提供强大的布局功能，从简单的水平和垂直对齐，到更高级的换行、排序和独立对齐。灵活运用这些属性，能够构建复杂且响应式的网页布局。

grid

grid也是CSS3引入的一种布局模式，可以将元素按行和列排列，形成网格布局。将父元素的display属性设置为grid，其子元素将按照网格布局的规则排列。如下所示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS Display</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      background-color: #e9ecef;
    }
    .grid-item {
      background-color: #6c757d;
      padding: 20px;
      color: white;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item">Grid Item 1</div>
    <div class="grid-item">Grid Item 2</div>
    <div class="grid-item">Grid Item 3</div>
    <div class="grid-item">Grid Item 4</div>
    <div class="grid-item">Grid Item 5</div>
    <div class="grid-item">Grid Item 6</div>
  </div>
</body>
</html>

在上面的示例中，.grid-container被设置为网格容器，.grid-item被设置为网格项，它们根据网格布局的规则排列。

以上就是CSS display属性的几种常见值及其应用实例。希望通过这篇文章，大家能够对display属性有更深入的了解，并在实际项目中灵活运用。欢迎大家指出文章中的不足之处，共同学习进步。

CSS基本功从头练之布局

block

inline

inline-block

display: inline-block 的特点

常见的应用场景

内联列表项示例

按钮排列示例

总结

none

display: none

visibility: hidden

举例

总结

flex

Flexbox 简介

弹性容器和弹性项目

示例

关键属性

flex-direction

示例

justify-content

1. flex-start

2. flex-end

3. center

4. space-between

5. space-around

6. space-evenly

align-items

1. flex-start

2. flex-end

3. center

4. baseline

5. stretch

主轴和交叉轴示例

示例 1：水平主轴和垂直交叉轴

示例 2：垂直主轴和水平交叉轴

高级 Flexbox 技巧

换行

示例

排序

示例

对齐

示例

grid

内容目录

选择主题

`display: inline-block` 的特点

`display: none`

`visibility: hidden`

1. `flex-start`

2. `flex-end`

3. `center`

4. `space-between`

5. `space-around`

6. `space-evenly`

1. `flex-start`

2. `flex-end`

3. `center`

4. `baseline`

5. `stretch`