CSS，display详解

CSS display是用于控制元素如何显示的属性，可以控制元素以何种方式呈现在页面上。

display属性有多个值，每个值都代表着不同的元素排布方式。下面将详细介绍每个display值的用法、使用方法和案例说明。

1. display: block

block元素会生成一个块级框，相邻的两个块级框会占据每一行。该属性使元素呈现为块级元素，从而在文档流中占据一行并高度可设置。块级元素可以容纳其它块级元素和内联元素。

当元素具有display: block属性时，可以对该元素的宽度、高度、内边距以及外边距进行设置。比如，让一个div元素具有display:block; width: 200px; height: 100px; background-color: #ccc，生成一个200*100的灰色块:

```css

div{

display:block;

width:200px;

height:100px;

background-color:#ccc;

}

```

2. display: inline

inline元素会生成一个内联框，相邻的两个内联框会在同一行上。该属性使元素呈现为内联元素，从而可以容纳在块级元素内或其它内联元素内。与block元素不同，inline元素只占据其内容所占据的空间，不会生成新的行盒。

当元素具有display: inline属性时，宽度、高度、内边距以及外边距都不能直接指定，因为它们无法容纳其它元素。比如，让span元素具有display:inline; background-color: #ccc生成一个带有背景颜色的内联元素:

```css

span{

display:inline;

background-color:#ccc;

}

```

3. display: inline-block

inline-block元素在元素内外都没有换行符，但它仍然是一个内联元素，可以对它进行高度和宽度的设置。

当元素具有display: inline-block属性时，宽度、高度、内边距以及外边距都可以设置。比如，让button元素具有display:inline-block; width:100px; height:50px; background-color:#000生成一个黑色的带有宽度和高度的内联元素：

```css

button{

display:inline-block;

width:100px;

height:50px;

background-color:#000;

}

```

4. display: flex

flex是弹性布局技术，它可以让容器内的元素动态地改变其宽度、高度以及顺序。当元素具有display: flex属性时，它会成为一个弹性盒容器，并且里面的所有直接子元素都成为伸缩元素。

通过设置弹性容器的以下属性，可以控制弹性项目的排布和外观：

- flex-direction：控制弹性容器内的弹性项目该如何排布（水平还是垂直）

- justify-content：控制弹性项目在弹性容器内如何对齐和分布

- align-items：控制弹性项目在弹性容器内的垂直对齐方式

- align-content：控制弹性项目与其它容器在垂直方向上的间距

比如，让父元素具有display: flex属性，同时设置flex-direction: row; align-items: center，子元素沿其父元素水平排布，并且始终垂直居中：

```css

.container{

display:flex;

flex-direction:row;

align-items:center;

}

```

5. display: none

none元素会从文档流中完全删除，不占据任何空间。

当元素具有display: none属性时，它不会在浏览器中显示，也不会占用任何空间。比如，点击按钮就可以隐藏一个div：

```html

隐藏

```

6. display: table

table元素会创建一个表格。表格会自行调整各单元格的大小，从而让表格尽可能平均地分布在容器中。

当元素具有display: table属性时，它会创建一个表格容器，并且里面的的所有直接子元素都成为表格单元格。比如，让div元素具有display:table; width:100%，将其转换为表格格式：

```css

div{

display:table;

width:100%;

}

```

7. display: table-cell

table-cell元素会将元素的内容显示为表格单元格的内容。table-cell属性只有在容器元素具有display: table时才有效。

当元素具有display: table-cell属性时，它会被视作表格单元格，并具有某些与表格单元格相关的特性，例如行高水平对齐等。比如，让div元素具有display:table-cell; width:33.33%将其转换为表格单元格：

```css

div{

display:table-cell;

width:33.33%;

}

```

8. display: table-row

table-row元素会将元素的内容显示为表格行的内容。table-row属性只有在容器元素具有display: table时才有效。

当元素具有display: table-row属性时，它会被视作表格行，并具有某些与表格行相关的特性，例如行高垂直对齐等。比如，让div元素具有display:table-row，将其转换为表格行：

```css

div{

display:table-row;

}

```

总结：

display是CSS中一个非常重要的属性，它可以让我们控制元素如何呈现在页面上。通过使用不同的display值，可以创建出非常多样化的布局。熟练掌握display的使用方法，可以让我们在页面设计和开发过程中更加得心应手。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/