css中display如何使用 css里的display

CSS中的display属性用于控制元素的显示方式。它可以设置元素的显示类型，从而决定元素在页面中的布局和表现。

display属性有多个取值，常见的有以下几种：

1. block：将元素显示为块级元素，即元素独占一行，宽度默认为父元素的100%。块级元素可以设置宽度、高度、内外边距等属性，并且会自动换行。例如，下面的代码将一个div元素显示为块级元素：

div {
  display: block;
}

2. inline：将元素显示为内联元素，即元素不会独占一行，宽度由内容决定。内联元素不能设置宽度、高度等块级元素的属性，也不会自动换行。例如，下面的代码将一个span元素显示为内联元素：

span {
  display: inline;
}

3. inline-block：将元素显示为内联块级元素，即元素不会独占一行，但可以设置宽度、高度等块级元素的属性，并且会自动换行。内联块级元素常用于实现多个元素在一行显示的效果。例如，下面的代码将一个button元素显示为内联块级元素：

button {
  display: inline-block;
}

4. none：将元素隐藏，即不显示在页面中，但仍然占据空间。使用display: none;可以在不删除元素的情况下隐藏它。例如，下面的代码将一个p元素隐藏：

p {
  display: none;
}

除了以上常见的取值，display属性还有其他一些取值，如table、flex等，用于实现特定的布局效果。例如，display: table;可以将元素显示为表格，display: flex;可以使用弹性盒子布局。

需要注意的是，display属性会影响元素的盒模型，不同的display取值会对元素的宽度、高度、内外边距等属性产生不同的影响。在使用display属性时，需要结合其他相关的CSS属性进行调整，以达到预期的布局效果。

总结一下，CSS中的display属性用于控制元素的显示方式，常见的取值有block、inline、inline-block和none。它们分别用于显示块级元素、内联元素、内联块级元素和隐藏元素。通过合理使用display属性，可以实现各种灵活的页面布局效果。