display布局有哪几种

在前端开发中，display属性是一个非常常用的CSS属性之一，它用于控制元素的显示方式。在CSS中，display属性可以控制元素使用哪种布局方式来呈现。通常情况下，display属性具有以下几种取值：

1. block

block是最常见的属性值，它可以将元素显示为块级元素，即元素会独占一行。block元素可以设置宽和高，并且可以设置margin和padding。常见的block元素包括div、p、h1~h6等。

2. inline

inline可以将元素显示为内联元素，即元素会位于一行中，并且与文本的基线对齐。inline元素不可以设置宽度和高度，只能设置margin和padding。常见的inline元素包括a、span、b、i、em等。

3. inline-block

inline-block元素会将元素显示为内联块级元素，即元素会位于一行中，但是可以像块级元素一样设置宽和高。inline-block元素不会独占一行，可以在一行内显示多个元素。常见的inline-block元素包括input、img等。

4. table

table将元素显示为一个表格，当然，这里的表格并不是真正的table标签，而是div等元素模拟的表格结构，通过设置display: table等属性实现。这种布局方式可以方便的实现网站布局中的栅格布局和流式布局等。常见的table元素包括div、ul、li等。

5. flex

flex是CSS3新增的一种布局方式，它可以方便的实现弹性布局。使用flex布局可以轻松的实现响应式布局和多个子元素的对齐和分布。常见的flex元素包括div、ul、li等。

6. none

none用于将元素隐藏，此时元素不会占用页面空间，该元素本质上并非将其从DOM中移除。通常情况下，我们可以在JavaScript代码中使用display:none来控制元素的显示和隐藏。

综上，display属性的常见值包含block、inline、inline-block、table和flex，每一种布局方式都有其特殊的应用场景和实现方式。在前端开发过程中，我们可以结合具体实际情况和布局要求进行选择和使用。