html和css的display属性，介绍下，干啥的
CSS的display属性用于控制HTML元素的显示类型和布局行为，是CSS中最重要的布局属性之一
基本功能
display属性可以显式修改每个盒子（元素）的视觉格式化模型，比如从行内级盒子变成块级盒子。
它决定了元素在页面上的显示方式，包括是否显示以及如何布局。
主要属性值
block：元素以块级形式显示，会换行并占据父容器的整个可用宽度。
常见的块级元素包括
<div>、<p>、<h1>等。inline：元素以行内形式显示，不会换行，只占据内容所需的宽度。
常见的行内元素包括
<span>、<a>等。inline-block：以内联块级对象的形式显示。
none：元素实际上从页面中被移走，它下面的元素会自动跟上填充。使用该值时，隐藏的元素在浏览器窗口中不会留下任何空间。
元素分类
在HTML中，元素按照显示特性主要分为两类：
块级元素：如
<h1>~<h6>、<p>、<div>、<ul>、<table>等，它们会独占一行。行内元素：如
<img>、<span>、<a>等，它们在同一行内显示。
与visibility的区别
visibility属性也可以控制元素可见性，但与display:none不同，使用visibility:hidden隐藏的元素仍然会在文档流中占据空间。只有当元素是绝对定位时，两者的布局效果才会相同。
通过合理使用display属性，开发者可以灵活地控制页面布局，实现各种复杂的视觉设计效果。
display属性中哪个值最常用？
在CSS的display属性中，最常用的属性值是block、inline、inline-block和none。
其中block、inline和inline-block是用于控制元素显示类型的主要值，它们可以实现元素类型的相互转换。
block将元素转换为块级元素，使其独占一行并可以设置宽高；
inline将元素转换为行内元素，使其与其他行内元素并排显示但宽高无效；inline-block则将元素设为行内块元素，既能水平排列又支持宽高设置。
而none值则用于完全隐藏元素，使元素不显示且不占据页面空间。
这四个属性值覆盖了网页布局中最基本和常见的需求，因此成为开发者使用频率最高的display属性值。
举例讲解这个属性
好的，我们来简单讲解CSS的display属性及其常用值。
CSS的display属性决定了元素如何在其容器中显示，是CSS布局中最关键的属性之一。
常用的display属性值及示例：
block（块级元素）
特点：元素独占一行，可以设置宽度(width)和高度(height)。
常见标签：
<div>,<p>,<h1>-<h6>,<ul>示例：
两个
<div>会上下排列。inline（行内元素）
特点：元素在一行内显示，无法设置宽度和高度，其大小由内容撑开。
常见标签：
<span>,<a>,<strong>示例：
多个
<span>会左右排列。inline-block（行内块元素）
特点：元素在一行内显示（inline的特性），但同时可以设置宽度和高度（block的特性）。
示例：
多个
<button>会水平排列，并且每个都有固定尺寸。none
特点：元素会被完全隐藏，不占据任何页面空间。
示例：
应用此样式的元素会从页面中“消失”。
flex（弹性布局）
特点：将元素变为一个弹性容器，可以方便地控制其子元素的排列、对齐和分布。
示例：
设置
display: flex;后，其直接子元素会变成弹性项，默认水平排列。应用：非常适合做一维布局，如导航栏、卡片列表等。
grid（网格布局）
设置
display: grid;后，可以精确控制子元素在网格中的位置。特点：将元素变为一个网格容器，可以定义行和列，创建复杂的二维布局。
示例：
div {
display: block; /* 这是默认值，通常不需要写 */
width: 200px;
height: 100px;
background-color: lightblue;
}span {
display: inline; /* 这也是默认值 */
/* 设置的 width 和 height 无效 */
background-color: lightcoral;
}button {
display: inline-block;
width: 100px; /* 有效 */
height: 40px; /* 有效 */
background-color: lightgreen;
}.hidden-element {
display: none;
}.container {
display: flex;
justify-content: space-between; /* 子项均匀分布 */
}.container {
display: grid;
grid-template-columns: 1fr 1fr; /* 两列等宽 */
gap: 10px; /* 网格间隙 */
}总结：
block：独占一行，可设宽高。inline：同行排列，不可设宽高。inline-block：同行排列，可设宽高。none：彻底隐藏。flex：一维弹性布局。grid：二维网格布局。
理解这些值是掌握CSS布局的基础，你可以通过给元素设置不同的display值来观察它们布局行为的变化。
每个示例在添加了display后显示什么样子
好的，我们来为每个常用的CSS display属性值配上示例和对应的显示效果描述。
💡 常用display属性值及显示效果
display: block; - 块级元素
特点：元素独占一行，可以设置宽度(width)和高度(height)。
示例：
<div style="display: block; background: lightblue;">块A</div> <div style="display: block; background: lightgreen;">块B</div>
显示效果：两个
<div>会上下排列，每个都占据其父容器的全部可用宽度。
display: inline; - 行内元素
特点：元素在一行内显示，无法设置宽度和高度，其大小由内容撑开。
示例：
<span style="display: inline; background: lightcoral;">行内1</span> <span style="display: inline; background: lightyellow;">行内2</span>
显示效果：两个
<span>会左右排列，紧贴在一起。
display: inline-block; - 行内块元素
特点：元素在一行内显示，但同时可以设置宽度和高度。
示例：
<button style="display: inline-block; width: 80px;">按钮A</button> <button style="display: inline-block; width: 80px;">按钮B</button>
显示效果：两个
<button>会水平排列，并且每个都有固定的80px宽度。
display: none; - 隐藏元素
特点：元素会被完全隐藏，不占据任何页面空间。
示例：
<div style="display: none;">你看不见我</div> <div>我是可见的</div>
显示效果：第一个
<div>会完全消失，仿佛不存在一样，页面上只会显示“我是可见的”这个元素。
display: flex; - 弹性布局
特点：将元素变为一个弹性容器，可以方便地控制其子元素的排列、对齐和分布。
示例：
<div style="display: flex; justify-content: space-around; background: #eee;"> <div>项目1</div> <div>项目2</div> <div>项目3</div> </div>
显示效果：容器内的三个子
<div>会在同一行内均匀分布。
display: grid; - 网格布局
特点：将元素变为一个网格容器，可以定义行和列，创建复杂的二维布局。
示例：
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;"> <div>网格A</div> <div>网格B</div> <div>网格C</div> <div>网格D</div> </div>
显示效果：四个子
<div>会排列成两行两列的网格。
display: table; - 表格布局
特点：让元素像
<table>一样显示。示例：
<div style="display: table; width: 100%;"> <div style="display: table-row;"> <div style="display: table-cell; border: 1px solid;">单元格1</div> <div style="display: table-cell; border: 1px solid;">单元格2</div> </div> </div>
显示效果：这些
<div>会像表格一样显示，有行和单元格的结构。
6个例子显示结果
好的，我们直接来看这6个常用display值的示例和它们对应的显示结果。
1. block（块级元素）
<div style="display:block; background:lightblue;">块元素A</div> <div style="display:block; background:lightgreen;">块元素B</div>
显示结果：
[浅蓝色背景的"块元素A"] ← 独占一行 [浅绿色背景的"块元素B"] ← 独占一行
2. inline（行内元素）
<span style="display:inline; background:lightcoral;">行内1</span> <span style="display:inline; background:lightyellow;">行内2</span>
显示结果：
[浅红色"行内1"][浅黄色"行内2"] ← 在同一行
3. inline-block（行内块元素）
<button style="display:inline-block; width:80px;">按钮A</button> <button style="display:inline-block; width:80px;">按钮B</button>
显示结果：
[80px宽的"按钮A"][80px宽的"按钮B"] ← 同行且有固定尺寸
4. none（隐藏元素）
<div style="display:none;">隐藏内容</div> <div>可见内容</div>
显示结果：
[可见内容] ← 第一个div完全消失
5. flex（弹性布局）
<div style="display:flex; justify-content:space-around;"> <div>项目1</div> <div>项目2</div> <div>项目3</div> </div>
显示结果：
[项目1] [项目2] [项目3] ← 均匀分布在同一行
6. grid（网格布局）
<div style="display:grid; grid-template-columns:1fr 1fr; gap:10px;"> <div>网格A</div> <div>网格B</div> <div>网格C</div> <div>网格D</div> </div>
显示结果：
[网格A] [网格B] ← 第一行 [网格C] [网格D] ← 第二行