display都有哪些属性

display的属性有block、inline、inline-block、none、flex、grid等。详细介绍：1、block，使用block属性值，元素将以块级元素的形式显示，块级元素会独占一行，并会在前后自动换行；2、inline，使用inline属性值，元素将以内联元素的形式显示，内联元素不会独占一行，而是与其他内联元素在一行上显示；3、inline-block等等。

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

display属性是CSS中常用的一个属性，用于控制元素的显示方式。通过使用display属性，可以使元素以不同的方式呈现在页面上。

在CSS中，display属性有多个取值，下面将介绍几种常用的display属性及其属性值。

1. block（块级元素）：使用block属性值，元素将以块级元素的形式显示。块级元素会独占一行，并且会在前后自动换行。常见的块级元素有div、p、h1-h6等。

2. inline（内联元素）：使用inline属性值，元素将以内联元素的形式显示。内联元素不会独占一行，而是与其他内联元素在一行上显示。常见的内联元素有span、a、em等。

3. inline-block（内联块级元素）：使用inline-block属性值，元素将以内联块级元素的形式显示。内联块级元素不会独占一行，但可以设置宽度和高度，并且可以在同一行上显示。常见的内联块级元素有input、button等。

4. none（隐藏元素）：使用none属性值，元素将被隐藏，不再占据页面的空间。被隐藏的元素在页面上不可见，也不会影响其他元素的布局。可以通过JavaScript等方式来控制元素的显示与隐藏。

5. flex（弹性布局）：使用flex属性值，元素将以弹性盒模型的形式进行布局。弹性布局可以实现灵活的布局方式，可以方便地调整元素的大小和位置。常见的弹性布局属性有flex-direction、flex-wrap、justify-content等。

6. grid（网格布局）：使用grid属性值，元素将以网格布局的形式进行布局。网格布局提供了一种二维布局方式，可以将页面划分为行和列，并且可以对元素进行定位和对齐。常见的网格布局属性有grid-template-rows、grid-template-columns、grid-gap等。

除了以上常用的display属性值外，还有一些其他的display属性值，如table（表格元素）、table-cell（表格单元格元素）等，可以根据具体的需求选择合适的属性值来控制元素的显示方式。

总结起来，display属性是CSS中控制元素显示方式的重要属性，常用的display属性值有block、inline、inline-block、none、flex、grid等。通过灵活运用这些属性值，可以实现各种不同的布局效果，提升页面的可读性和用户体验。

以上就是display都有哪些属性的详细内容，更多请关注php中文网其它相关文章！