一、display属性
display属性定义了元素的展示类型，常用的属性有block、inline、inline-block、flex等，通过修改display属性，我们可以方便的控制元素的布局和显示方式。
/* 修改 div 元素的展示类型为 inline */
div {
display: inline;
}
上述代码将会把一个原本是块级元素的 div 元素变成一个行内元素，从而改变它的布局方式。
二、display属性值为none
display属性的值还可以是 none，这种情况下元素会从页面流中移除，不会再占据空间，也不会对文档流产生任何影响。可以通过 JavaScript 动态地控制元素的显示和隐藏。
/* 隐藏某一个 div 元素 */
div {
display: none;
}
三、display属性详解
display属性的值是比较多的，我们来详细的了解一下每一个取值的意义和应用场景。
1. display属性值为block
block类型的元素会在页面上单独占据一行，例如 div、h1、p 等元素。这种元素最明显的特征是：总是从新行开始。
当仅仅设置display: block; 时，元素宽度默认占据其父容器的 100%。
/* 将列表元素 ul 改为块级元素 */
ul {
display: block;
}
2. display属性值为inline
inline元素通常没有设置宽度和高度，其宽度和高度是由内容决定的，例如 span、a、img 等元素。这种元素通常是行内元素。
/* 将一个 div 元素的展示属性改为行内元素 */
div {
display: inline;
}
3. display属性值为inline-block
inline-block 元素是行内块元素，与行内元素类似，但是可以设置宽度和高度等属性，和块级元素一样可以占据多行的空间。
/* 将表单按钮改为行内块元素 */
button {
display: inline-block;
}
4. display属性值为flex
flex布局是CSS3中的一种新特性，它使得我们可以更方便的创建复杂的布局，得到更加灵活的盒模型。
flex属性是对容器设置的，用于指定当前容器使用flex布局，而不是block或者其他类型的布局。
/* 将容器的布局方式改为flex */
.container {
display: flex;
}
四、display属性值有哪些
display属性的取值还有很多，下面列出一些常见的值和对应的特征。
- table、table-cell 模拟表格布局
- list-item 列表项布局
- grid 网格布局
- none 元素不显示
- initial 恢复为默认属性
五、display属性值及解释
下面是常见的 display 属性值及其解释：
- block：块级元素，总是从新行开始，并占满父容器的宽度。
- inline：行内元素，会在同一行内显示，并且会根据内容自动调节宽度。
- inline-block：行内块元素，和行内元素一样可以在同一行内显示，但是可以设置宽度和高度等属性。
- none：元素不显示，也不占据空间。
- flex：弹性布局，用于创建复杂的布局，得到更加灵活的盒模型。
六、display属性block
block 元素最常见的是 div 元素，通过 block 元素使得具有相同语义的元素能够聚集起来，形成了网页中的一个个区块。block 元素默认宽度占据父元素的全部宽度。
/* div 块级元素 */
div {
display: block;
}
七、display属性是什么意思
display 属性用于控制元素的布局和显示方式。不同类型的元素采用不同的布局方式和显示形式，通过修改 display 属性，可以方便的控制元素的表现。
