CSS，display详解

CSS display属性是CSS中一个常用的属性，用于定义HTML元素的显示方式。它可以控制元素是居于一行还是一列，以及如何相对于其他元素进行布局。该属性有多个取值，每个取值都有不同的作用，下面将详细介绍。

1. block：

block是display属性的默认值，一个元素被设置为block时，会以块级元素的形式显示。块级元素会单独占据一行，宽度默认是100%。常见的块级元素有div、p、h1等。

2. inline：

inline是指内联元素，在一行内显示，不会独占一行。内联元素的宽度由内容决定，不能设置宽高属性。常见的内联元素有span、a、img等。

3. inline-block：

inline-block是指内联块元素，类似于内联元素，在一行内显示，但是可以设置宽高属性，并且会以块级元素的形式显示。inline-block可以让块级元素在一行内水平排列，常见用法是设置导航栏菜单的样式。

4. none：

none是指元素不会被显示，它会完全隐藏元素，并从文档流中删除。这个属性常用来动态地控制元素的显示与隐藏，例如通过JavaScript来控制元素的显示与隐藏。

5. flex：

flex是CSS3新引入的一种布局方式，通过将容器设置为flex，可以控制子元素的排列方式。flex布局可以实现弹性的容器和子元素布局，更方便地实现页面的自适应。这需要使用到flex属性的其他属性值，例如flex-grow、flex-shrink等。例子：

```css

.container {

display: flex;

flex-direction: row; /* 默认值，沿水平方向排列 */

justify-content: center; /* 居中对齐子元素 */

align-items: center; /* 在交叉轴上居中对齐子元素 */

}

.container > div {

flex: 1; /* 子元素均分空间 */

}

```

除了上述常用的display属性值外，还有一些其他值，如table、table-cell等，用于实现表格布局。

总结：

CSS display属性控制元素的显示方式，常见的属性值有block、inline、inline-block、none和flex。通过设置不同的display值，可以实现不同的页面布局效果。使用display属性可以方便地控制元素的显示与隐藏，并实现页面的自适应布局。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/