HTML 中 display 的属性值有哪些

在 HTML 页面布局与样式设计中，display 属性是一个极为关键的属性，它用于规定元素应该生成的框的类型，不同的属性值能实现多样化的页面布局效果。

首先是 block 值。设置为 block 的元素会独占一行，并且可以设置宽度和高度。像 <div> 元素，默认的 display 属性值就是 block。这类元素会从新的一行开始，并且会尽可能地向左右两边伸展，宽度默认是父元素的 100%。例如导航栏中的各个菜单项，若将其设置为 block 类型，就能清晰地分隔开，各自独立占据一行。

inline 值则与 block 大不相同。具有 inline 显示类型的元素不会换行，它们会在一行内显示，并且宽度和高度由内容决定，无法通过 CSS 直接设置宽度和高度。常见的 <a> 标签、<span> 标签等，默认就是 inline 类型。比如一段文本中的超链接，多个链接可以在同一行内依次排列。

inline-block 是 inline 和 block 的结合体。元素既保持在一行内显示，又可以像 block 元素一样设置宽度和高度。这种属性值在制作水平导航栏或者图片画廊等布局时非常实用。比如一个商品展示区，每个商品卡片可以设置为 inline-block，既能在一行内展示多个商品，又能精确控制每个卡片的大小。

none 值也很特殊，设置为 none 的元素不会显示，在页面中就好像不存在一样，不占据任何空间。这在实现页面元素的隐藏功能时经常用到，例如在某些交互场景下，需要暂时隐藏某个提示信息，就可以通过修改 display 属性值为 none 来实现。

除了以上常见的属性值，还有 flex 和 grid。flex 即弹性布局，它能让元素在主轴和交叉轴上进行灵活排列和伸缩，大大简化了一维布局。而 grid 网格布局则更强大，用于创建二维网格容器和项目，能够实现复杂的页面布局，让网页元素在行列中精准定位。掌握这些 display 的属性值，能让开发者在 HTML 页面布局时如鱼得水，打造出各式各样美观实用的页面。