一个 HTML 盒子（元素）以样什么方式显示，是否独占一行，能否设置宽高，内部子元素该如何排列。全都由display这个属性决定。display是 CSS 最核心、最常用的属性之一。
而它的几个孩子也有着不同于彼此的属性。用一个表格来讲。
| display 值 | 会不会换行 | 能否设置宽高 | 用途 |
| block | 会 | 能 | 大容器、段落、标题 |
| inline | 不会 | 不能 | 文字高亮、链接 |
| inline-block | 不会 | 能 | 按钮、导航、图标 |
| none | 隐藏 | - | 隐藏元素 |
| flex | 父控制子 | 能 | 现代灵活布局 |
相信上面的表格已经让你对display这个属性有了基础的认识，下面我们通过代码和一些注意事项对他进行更深一步的认识吧。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子的display属性：控制元素的性质</title> <style> #div1 { width: 200px; height: 80px; background-color: red; border: 2px black solid; /* 隐藏元素 */ /* display: none; */ /* 强行设置为普通行内元素， 宽高不能自行设置，其宽高仅由内容撑起 */ /* display: inline; */ /* 强行设置为行内块元素，通过配置成inline-block， 宽高可以自行设置 */ /* display: inline-block; */ } #div2 { width: 200px; height: 80px; background-color: blue; border: 2px black solid; /* 行内元素，宽高不能设置，只能有默认的宽高 */ /* display: inline; */ /* 强行设置为行内块元素，通过配置成inline-block， 宽高可以自行设置 */ /* display: inline-block; */ } #div3 { width: 200px; height: 80px; background-color: green; border: 2px black solid; /* 强行设置为行内块元素，通过配置成inline-block， 宽高可以自行设置 */ /* display: inline-block; */ } #div4 { width: 200px; height: 80px; background-color: yellow; border: 2px black solid; /* 强行设置为行内块元素，通过配置成inline-block， 宽高可以自行设置 */ /* display: inline-block; */ } b { width: 200px; height: 80px; background-color: pink; border: 2px black solid; /* 强行配置为块元素，宽高可以设置 */ /* display: block; */ /* 强行设置为行内块元素，通过配置成inline-block， 宽高可以自行设置 */ /* display: inline-block; */ } </style> </head> <body> <div class="container"> <!-- 普通块元素 --> <div id="div1">盒子1</div> <div id="div2">盒子2</div> <div id="div3">盒子3</div> <div id="div4">盒子4</div> <!-- 普通行内元素 --> <b>盒子5</b> <b>盒子6</b> </div> </body> </html>运行效果如图
这时有人会问了。为什么盒子56的行高和宽度没有变化呢？代码中的b元素不是已经给他们设置了吗？
这不 注意事项就来了！
display默认是inline（行内元素），行内元素是无法直接设置宽高的！
那我们要怎么解决呢？我们可以设置块内元素来强行控制它。
代码如下
display: block;如此，我们便可以得到
这样整整齐齐的盒子了。而我们不仅可以让他竖着来，也可以让他横着来。
/* 强行设置为行内块元素，通过配置成inline-block， 宽高可以自行设置 */ display: inline-block;下面，我们来介绍一下display一个比较特殊的孩子Flex。
Flex容器（父元素）：给父标签加 display: flex，它就变成Flex容器，能控制所有子元素的排列方式
Flex项目（子元素）：容器里的所有直接子标签，会自动遵循Flex规则排列，不再是默认的垂直流式布局
同时要记住两条轴线（所有对齐、排列都靠这两条线）：
主轴：默认水平左右方向，子元素默认顺着主轴从左到右排
交叉轴：默认垂直上下方向，和主轴相互垂直
<!DOCTYPE html> <html lang="zh-CN"> <head> <!-- 【Flex 布局核心概念与机制】 Flexbox 是 CSS3 引入的一种一维布局模型，旨在提供更高效的方式来布局、对齐和分配容器内项目的空间。 其核心概念包括： 容器与项目：采用 Flex 布局的元素称为 Flex 容器，其内部的子元素称为 Flex 项目。 主轴与交叉轴：Flex 容器有两根轴，主轴由flex-direction定义，交叉轴垂直于主轴。 对齐方式：justify-content 控制主轴对齐，align-items 和 align-content 控制交叉轴对齐。 空间分配：通过 flex-basis、flex-grow 和 flex-shrink 控制项目在主轴上的初始大小、放大和缩小比例。 --> <meta charset="UTF-8"> <title>Flex布局示例1 - 基本容器（按照默认规则排列）</title> <style> .container { /* ===== Flex 容器默认规则（不写属性时的默认值）===== 1. flex-direction: row → 主轴方向：水平从左到右 → 项目会水平排列成一排 2. flex-wrap: nowrap → 不换行（默认） → 项目会被压缩以适应容器宽度（除非设置 flex-shrink: 0） → 如果想换行，需要设置: flex-wrap: wrap; 3. justify-content: flex-start → 主轴对齐方式：项目靠主轴起点（左）对齐 → 其他值: flex-end(右) | center(居中) | space-between | space-around 4. align-items: stretch → 交叉轴对齐方式：项目会拉伸填满整个交叉轴方向 → 前提：项目没有设置 height（或者 height 为 auto） → 其他值: flex-start | flex-end | center | baseline 5. align-content: normal (在单行时无效) → 多行项目在交叉轴方向的对齐方式 ===== 项目（item）的默认规则 ===== 6. flex-grow: 0 → 默认不自动放大（当容器有剩余空间时） → 如果想自动放大: flex-grow: 1; 7. flex-shrink: 1 → 默认会自动收缩（当项目总宽度超过容器时） → 注意：只有 width/flex-basis 参与收缩，margin/padding/border 不会收缩！ → 如果不想收缩: flex-shrink: 0; 8. flex-basis: auto → 项目的基础尺寸，默认取 width 值 → 也可以设置为具体像素: flex-basis: 100px; */ /* 通过 display:flex 将此元素强制转换为 Flex 容器 */ display: flex; /* 下面是可自行配置的灵活规则 */ /* flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; */ border: 2px solid #aaa; width: 600px; height: 300px; padding: 10px; } .item { background-color: #4CAF50; border: 3px solid red; width: 80px; height: 40px; color: white; text-align: center; } </style> </head> <body> <h3>Flex容器示例（项目按照容器默认规则排列）</h3> <div class="container"> <!-- 块元素：从上到下文档流排列 --> <div class="item">项目1</div> <div class="item">项目2</div> <div class="item">项目3</div> <div class="item">项目1</div> <div class="item">项目2</div> <div class="item">项目3</div> <div class="item">项目1</div> <div class="item">项目1</div> <div class="item">项目2</div> <div class="item">项目3</div> <div class="item">项目1</div> </div> </body> </html>主轴对齐方式
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Flex布局示例3 - justify-content（主轴对齐方式）</title> <style> /* ====== justify-content 属性详解 ====== 作用：控制所有项目在主轴（水平方向）上的对齐方式和间距分布 前提：只有在主轴方向有剩余空间时才会生效 可选值： 1. flex-start → 项目靠主轴起点（左边）对齐（默认值） 2. flex-end → 项目靠主轴终点（右边）对齐 3. center → 项目在主轴方向居中对齐 4. space-evenly → 项目之间以及项目与容器边缘的间距完全相等 5. space-between → 项目之间间距相等，但首尾项目紧贴容器边缘 6. space-around → 项目两侧的外边距相等（项目之间间距是边缘间距的2倍） */ .container { display: flex; border: 2px solid #a00; padding: 10px; height: 100px; } /* ====== 项目样式 ====== 简单设置项目的尺寸和外观 */ .item { background-color: #4CAF50; border: 3px solid red; width: 80px; height: 40px; color: white; /* margin: 5px; padding: 20px; */ text-align: center; } </style> </head> <body> <h1>justify-content（控制主轴对齐方式）</h1> <!-- justify-content属性的六种取值，控制项目在主轴上的对齐方式和间距分布。 --> <h3>justify-content: flex-start 项目在容器中，以主轴起点对齐（默认值）</h3> <div class="container" style="justify-content: flex-start;"> <div class="item">项目1</div> <div class="item">项目2</div> <div class="item">项目3</div> </div> <h3>justify-content: flex-end 项目在容器中，以主轴终点对齐</h3> <div class="container" style="justify-content: flex-end;"> <div class="item">项目1</div> <div class="item">项目2</div> <div class="item">项目3</div> </div> <!-- <h3>justify-content: center 项目在容器中，以主轴居中对齐</h3> <div class="container" style="justify-content: center;"> <div class="item">项目1</div> <div class="item">项目2</div> <div class="item">项目3</div> </div> <h3>justify-content: space-evenly 项目在容器中均匀分布</h3> <div class="container" style="justify-content: space-evenly;"> <div class="item">项目1</div> <div class="item">项目2</div> <div class="item">项目3</div> </div> <h3>justify-content: space-between 项目在容器中均匀分布，但首尾项目紧贴容器边缘</h3> <div class="container" style="justify-content: space-between;"> <div class="item">项目1</div> <div class="item">项目2</div> <div class="item">项目3</div> </div> <h3>justify-content: space-around 项目在容器中均匀分布，但每个项目两侧外边距相等</h3> <div class="container" style="justify-content: space-around;"> <div class="item">项目1</div> <div class="item">项目2</div> <div class="item">项目3</div> </div> --> </body> </html>多行项目在容器交叉轴方向上的对齐方式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Flex布局示例6 - 多行项目在容器交叉轴方向的对齐方式（含换行控制）</title> <style> /* ====== align-content 属性详解 ====== 作用：控制多行项目在交叉轴（垂直方向）上的对齐方式 重要前提： 1. 必须先使用 flex-wrap: wrap 换行（产生多行） 2. 只有一行时，align-content 无效 3. 只有在交叉轴方向有剩余空间时才会生效 可选值： 1. flex-start → 所有行靠交叉轴起点（顶部）对齐 2. flex-end → 所有行靠交叉轴终点（底部）对齐 3. center → 所有行在交叉轴方向居中对齐 4. space-between → 行之间间距相等，首行靠顶，末行靠底 5. space-around → 行上下间距相等，整体与容器边缘也有间距 6. stretch → 默认值，行拉伸填满剩余空间（行内项目也会被拉伸） */ /* ====== flex-wrap 属性说明 ====== 可选值： 1. nowrap (默认) → 不换行，项目会被压缩以适应容器 2. wrap → 换行，项目超出容器时自动换到下一行 3. wrap-reverse → 换行，但反向显示（第一行在底部） */ /* 定义flex容器的基础样式 */ .container { /* 将容器设置为flex布局 */ display: flex; /* 容器宽度固定，控制换行效果 */ width: 500px; /* 容器高度固定，为交叉轴留出空间 */ height: 250px; /* 容器边框，方便观察整体范围 */ border: 2px solid #333; /* 容器之间的外边距，避免拥挤 */ margin: 10px; /* 强制换行：当项目总宽度超过容器时自动换行，产生多行 */ flex-wrap: wrap; } /* ====== 项目样式 ====== 注意：本示例中项目没有 margin，所以 flex-shrink 可以正常压缩 如果项目有 margin，margin 不会参与压缩，可能导致溢出 */ .item { /* 项目宽度 */ width: 160px; /* 项目高度 */ height: 40px; /* 项目边框 */ border: green solid 1px; /* 文字颜色 */ color: red; /* 文字水平居中 */ text-align: center; /* 项目外边距（注释掉，为了让 flex-shrink 正常压缩）*/ /* margin: 5px; */ } /* 标题样式 */ p { margin: 20px 0 5px 10px; } </style> </head> <body> <!-- ====== align-content vs align-items 区别 ====== 本页面展示了 align-content 的效果： 注意：由于 flex-wrap 被注释掉，项目没有真正换行！ 所以本示例中 align-content 实际上不生效（只有一行）。 如果想看真正的多行对齐效果，需要取消注释 flex-wrap: wrap; 重要区别： - align-items: 作用于"单行"内的所有项目（垂直方向的对齐） - align-content: 作用于"多行"整体（多行作为一个整体在容器中的对齐） 换行相关属性： - flex-wrap: nowrap (默认) → 不换行 - flex-wrap: wrap → 换行 --> <h1>多行项目在容器交叉轴方向上的对齐方式</h1> <!-- 第一个容器没有设置 align-content，所以使用默认值 stretch 由于没有换行（flex-wrap 被注释），所以 align-content 实际不生效 --> <p>align-content: flex-start（所有行整体靠交叉轴起点/顶部）</p> <div class="container" style="align-content: flex-start;"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> </div> <!-- 2. align-content: center --> <!-- 效果：所有行作为一个整体，在容器垂直方向居中 --> <p>align-content: center（所有行整体在交叉轴中间/垂直居中）</p> <div class="container" style="align-content: center;"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> </div> <!-- 3. align-content: flex-end --> <!-- 效果：所有行靠容器底部对齐 --> <p>align-content: flex-end（所有行整体靠交叉轴终点/底部）</p> <div class="container" style="align-content: flex-end;"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> </div> <!-- 4. align-content: space-between --> <!-- 效果：第一行靠顶，最后一行靠底，行之间间距相等 --> <p>align-content: space-between（行与行之间间距相等，第一行靠顶，最后一行靠底）</p> <div class="container" style="align-content: space-between;"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> </div> <!-- 5. align-content: space-around --> <!-- 效果：每行上下间距相等，整体与容器边缘也有间距 --> <p>align-content: space-around（行上下都有相等间距，整体与容器边缘也有间距）</p> <div class="container" style="align-content: space-around;"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> </div> </body> </html>
