前端display是什么

前端display是css的一个属性，用于控制元素的显示方式。display属性可以设置元素的显示类型，决定元素在页面中如何布局和呈现。display属性的常见取值有block、inline、inline-block、none、flex和grid等。通过设置display属性，可以灵活地控制元素的显示方式，能提高页面的可读性、可维护性和可扩展性，为用户提供更好的用户体验。

本教程操作系统：windows10系统、DELL G3电脑。

在前端开发中，display是CSS的一个属性，用于控制元素的显示方式。display属性可以设置元素的显示类型，决定元素在页面中如何布局和呈现。

display属性的常见取值有以下几种：

1. block：

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

   - 块级元素（Block-level element）：display属性设置为block的元素被称为块级元素。块级元素会单独占据一行，独自占据一块空间，可以设置宽度、高度、外边距和内边距等属性。常见的块级元素有div、p、h1-h6等。

2. inline：

   - 行内元素（Inline element）：display属性设置为inline的元素被称为行内元素。行内元素不会独占一行，只占据自身内容的空间，不能设置宽度、高度、外边距和内边距等属性。常见的行内元素有span、a、strong、em等。

3. inline-block：

   - 行内块级元素（Inline-block element）：display属性设置为inline-block的元素被称为行内块级元素。行内块级元素既具有行内元素的特性，又具有块级元素的特性。行内块级元素可以设置宽度、高度、外边距和内边距等属性，同时不会独占一行。常见的行内块级元素有img、input等。

4. none：

   - 隐藏元素（Hidden element）：display属性设置为none的元素会被隐藏，不会在页面中显示，并且不占据任何空间。隐藏元素不会被渲染和布局，无法与其他元素进行交互。通过将display属性设置为none，可以临时隐藏元素，而不必从DOM中删除元素。

5. flex：

   - 弹性盒子（Flexbox）：display属性设置为flex的元素会成为弹性容器，使用弹性盒子布局模型。弹性盒子可以通过设置弹性容器的属性来控制子元素的布局和对齐方式，使得页面布局更加灵活和响应式。

6. grid：

   - 网格布局（Grid）：display属性设置为grid的元素会成为网格容器，使用网格布局模型。网格布局可以通过设置网格容器的属性来控制子元素的布局和对齐方式，实现复杂的网格布局。

除了上述常见取值，display属性还有其他一些取值，如table、table-cell、table-row等，用于控制元素的表格布局。

通过设置display属性，我们可以灵活地控制元素的显示方式，实现不同的布局效果和交互体验。在前端开发中，合理使用display属性可以提高页面的可读性、可维护性和可扩展性，为用户提供更好的用户体验。