1. display:block
块级元素一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。因此，可以定义其宽度和高度。特点：
- 独占一行：块级元素总是独占一行，它们会从左到右扩展以占满其父容器的整个宽度，除非设置了具体的宽度（width）值。
- 容纳其他元素：块级元素可以包含内联元素（如
<span>、<a>）和其他块级元素（如<div>、<p>）。这使得块级元素非常适合作为网页布局的容器。 - 可定义宽度和高度：可以为块级元素定义宽度（width）和高度（height）。如果未定义宽度，块级元素的宽度将默认扩展到其父容器的全部宽度。如果未定义高度，则高度会根据其内容自动扩展。
- 上下边距：块级元素的上下外边距（margin）会影响元素间的距离，并且在一些情况下（如相邻块级元素的垂直外边距），上下外边距可能会合并（margin collapsing）。
常见的块级元素：
2. display: none
- 作用: 隐藏元素。
- 效果: 元素完全从页面中消失，不占据任何空间。与 visibility: hidden 不同，display: none 不仅让元素不可见，还将其从文档流中移除，其他元素会填补它的位置
- 常见使用场景: 动态显示和隐藏内容，比如在JavaScript中用来控制模态框的显示或隐藏。
3. display: inline
-
作用: 将元素设置为内联元素。
-
效果: 元素与其周围的其他内联元素在同一行显示。但 padding 和 margin 的水平值（left 和 right）仍然有效，而垂直值（top 和 bottom）在很多情况下不起作用。特点：
不会在前后自动换行
width 和 height 属性对内联元素不起作用
-
常见使用场景: 适用于需要在同一行显示的元素，如文字、链接等。
-
内容决定高度: 内联元素的高度是由其所在行的行高决定的，而不是由元素自身的 padding、border 或 margin 决定。行高是基于字体大小和行高属性（line-height）计算的。当你为内联元素添加垂直的 padding、border 或 margin 时，这些属性只是应用到该元素的上下边界，但它们不会扩大包含该元素的行的高度。行的高度是所有内联元素的
line-height的最大值，不会因为某一个元素的 padding、border 或 margin 增加而改变。虽然垂直的 padding、border 和 margin 不会影响行高，但它们仍然存在并占据空间。这就是为什么它们会产生视觉效果，但不会实际改变元素的布局高度。这个设计的目的在于保持文本内容的行内布局结构不被破坏，确保行内元素能够平滑地排布在一行中，而不受单个元素的盒模型属性干扰。
-
line-height 的作用: 内联元素的高度通常与其文本的行高一致。因此，调整 line-height 属性会影响内联元素的高度。如果 line-height 大于字体的高度，则元素的高度也会相应增加。
-
盒模型的限制: 在内联元素上，垂直方向的 padding、border 和 margin 会影响其占用空间（包括高度），但它们的效果往往不会像在块级元素上那样明显。
4. display：inherit继承。子元素的 display 属性将与父元素保持一致;
5. display：initial默认；
6. display：unset如果属性是继承的，则表现为 inherit；否则表现为 initial；
7. display：revert撤销应用的所有样式，将属性重置为浏览器默认样式（用户代理样式表）或更高优先级的样式表的值。新的css特性。
