CSS display属性

在本文中，我们将介绍CSS中的display属性。display属性可以控制元素如何呈现在页面中，如块级元素、内联元素以及其他特殊元素。我们来看看各种值的不同应用。

阅读更多：CSS 教程

块级元素

块级元素通常用于构建页面的整个布局，它们占据整个父级元素的宽度，可以设置宽度、高度，同时它们可以包含其他元素。常见的块级元素有div、h1-h6、p、section等。

div {
  display: block;
  width: 100%;
  height: 100px;
  background-color: yellow;
}

上面的代码将一个div元素设置为块级元素，同时设置宽度为100%，高度为100像素，并且设置背景颜色为黄色。

内联元素通常用于包含文本内容，它们只占据它自身的宽度，不能设置宽度、高度，并且不能包含其他元素。常见的内联元素有a、span、img、em、i、label等。

span {
  display: inline;
  background-color: green;
}

上面的代码将一个span元素设置为内联元素，并且设置背景颜色为绿色。

内联块级元素是一种组合类型，它们通常用于包含其他元素，并且能够在水平方向上排列，同时又可以设置宽度、高度等属性，它们支持文本流的特性。常见的内联块级元素有img、input、button等。

img {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: blue;
}

上面的代码将一个img元素设置为内联块级元素，并且设置宽度为200像素，高度为200像素，并且设置背景颜色为蓝色。

CSS中还有一些特别的元素，它们的显示方式和默认值与其他元素有所不同。如：

表格元素table默认是块级元素，它的子元素要使用表格单元格td或表格标题th元素来组成表格。

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

列表元素ul和ol默认也是块级元素，每一条列表项li元素默认是块级元素。

<ul>
  <li>List item 1</li>
  <li>List item 2</li>
</ul>

内联表格元素inline-table默认是以表格的形式呈现在文本流中的，它的子元素也必须是表格单元格td或表格标题th元素。

table {
  display: inline-table;
}

none值表示元素不会在页面中显示出来，同时它不再保留任何空间。

div {
  display: none;
}

display属性常用于控制元素的呈现方式，其中包括块级元素、内联元素、内联块级元素和其他特殊元素。通过使用display属性，我们可以灵活地控制页面布局和元素的排列方式。