css中display什么意思

css 中 display 属性定义元素的显示方式，常见值为：block：占据整行，开始新行inline：与其他元素同排，不换行inline-block：与其他元素同排，可设置宽高none：不显示flex：使用 flexbox 布局，自由布局grid：使用网格布局，创建复杂多列

CSS 中 display 的含义

display 属性定义元素在文档中的显示方式。它是一个非常重要的属性，因为它决定了元素在页面上的布局和外观。

用途

display 属性有以下几个常见值：

立即学习“前端免费学习笔记（深入）”；

• block：元素占据整个水平线，并且在页面上开始一个新行。
• inline：元素在同一行上与其他元素并排显示，不换行。
• inline-block：元素在同一行上显示，但可以设置高度和宽度。
• none：元素不显示。
• flex：元素使用 flexbox 布局，允许元素在容器内灵活布局。
• grid：元素使用网格布局，可以创建复杂的多列布局。

例子

以下是一些使用 display 属性的示例：

<div style="display: block;">这是一个块元素</div> <span style="display: inline;">这是一个内联元素</span> <button style="display: inline-block;">这是一个内联块元素</button> <div style="display: none;">这是一个隐藏元素</div>

选择正确的 display 值

选择正确的 display 值取决于您希望元素在页面上如何显示。以下是一些建议：

• 标题和段落应使用 block 值。
• 链接和按钮应使用 inline-block 值。
• 图像和视频应使用 block 或 inline-block 值。
• 隐藏元素应使用 none 值。
• 对于复杂布局，应考虑使用 flex 或 grid 值。