css display 常用那些属性

CSS的display属性常用的属性有以下几种：

1. none：表示元素不会被显示，空间不会占用。

2. inline：默认值，表示元素会显示为行内元素，和其他行内元素在同一行显示。同时也可以通过line-height, height和width属性来设置元素的高度和宽度。

3. block：表示元素会显示为块级元素，会独占一行。可以通过width, height, margin和padding属性来设置元素的尺寸和外边距。

4. inline-block：表示元素会显示为行内块级元素。和inline相比，可以设置元素的宽度、高度、外边距和内边距等。

5. flex：表示元素以弹性的方式布局，可以通过flex-direction, flex-wrap, justify-content和align-items等属性来实现灵活的布局。

6. grid：表示元素以网格的形式布局，可以通过grid-template-columns, grid-template-rows, grid-gap等属性来定义网格布局。

7. table：表示元素会以表格的形式进行布局，类似于HTML的table元素。

8. inline-table：表示元素会以行内表格的形式进行布局。

9. list-item：表示元素会以列表项的形式进行布局，通常和ul或ol元素配合使用。

以上是display属性常用的几种值，通过设置不同的display属性，可以调整元素的布局和显示方式，并实现不同的效果。

相关问题

介绍css的display属性

CSS 的 `display` 属性用于定义 HTML 元素的显示方式。常见的取值有以下几种：

- `block`：将元素显示为块级元素，即每个元素都会独占一行或多行，可以设置宽度和高度；
- `inline`：将元素显示为内联元素，即元素在一行中，不会独占一行，宽度和高度不可设置；
- `inline-block`：将元素显示为内联块级元素，即元素在一行中，可以设置宽度和高度；
- `none`：将元素隐藏，不占据空间；
- `table`：将元素显示为表格；
- `inline-table`：将元素显示为内联表格；
- `flex`：将元素显示为弹性盒子；
- `inline-flex`：将元素显示为内联弹性盒子。

除了以上常用的取值，还有一些其他的取值，如 `grid`、`inline-grid`、`list-item`、`run-in`、`table-row-group`、`table-header-group`、`table-footer-group`、`table-row`、`table-column-group`、`table-column`、`table-cell`、`table-caption` 等。

通过设置 `display` 属性，我们可以轻松地控制元素的显示方式，从而实现更加灵活的布局效果。

display:flex有那些属性

display:flex是CSS中的一个属性，用于将元素设置为Flex容器，使子元素成为Flex项目。display:flex属性本身不包含任何属性值，它只是将元素设置为Flex容器。

然而，display:flex属性可以与一系列的Flex子属性一起使用，以控制Flex布局的各种方面。以下是一些常用的Flex子属性：

1. flex-direction：用于定义主轴的方向，决定子项目的排列方式。可选值有row（默认值，沿水平方向排列）、row-reverse、column（沿垂直方向排列）和column-reverse。
2. flex-wrap：用于控制子项目是否换行。可选值有nowrap（默认值，不换行）、wrap（换行）和wrap-reverse（反向换行）。
3. flex-flow：简写属性，用于同时设置flex-direction和flex-wrap。
4. flex：用于设置主轴上的弹性大小。可选值有auto（默认值，根据容器大小自动调整）、none（不伸缩）、flex-grow（伸缩因子，表示各项目在主轴上伸展的相对比例）、flex-shrink（收缩因子，表示项目在主轴上收缩的相对比例）和fixed（指定项目在主轴上的具体大小）。
5. align-items和align-self：用于在交叉轴上对齐项目。align-items用于设置容器内项目在交叉轴上的对齐方式，align-self用于设置单个项目的对齐方式，可以覆盖容器级别的对齐设置。
6. justify-content：用于在主轴上对齐项目。

这些属性可以单独使用，也可以组合使用，以实现更复杂的Flex布局效果。请注意，这些属性需要在display:flex的元素上设置，才能生效。