CSS Display(显示)学习笔记

CSS的display属性可以控制元素在页面上的显示方式，是CSS中比较常用的属性之一。在本篇笔记中，我们将讨论一些常见的display值和使用场景。

块级元素和内联元素

CSS中的元素可以分为两种类型：块级元素和内联元素。在默认情况下，元素的display值取决于元素的标签类型。例如，div、p、h1等都是块级元素，span、a等都是内联元素。

块级元素

块级元素通常表现为独占一行，并默认占据其父容器的整个宽度。常见的块级元素包括：

div: 用于组织文档结构的基本块级元素。
p: 段落元素，用于呈现文本段落。
ul、ol和li: 用于呈现列表。
h1、h2、h3、h4、h5和h6: 标题元素，用于呈现不同级别的标题。
form和input等表单元素。

内联元素

内联元素通常表现为与其他元素在同一行内，并只占据其内容所需的宽度。常见的内联元素包括：

span: 内联元素的基本块级元素，用于标记文本。
a: 超链接元素。
img: 图片元素。
input、select、textarea等表单元素。

display属性常见的属性值

block

将元素转换为块级元素。

cssCopy Code
display: block;

inline

将元素转换为内联元素。

cssCopy Code
display: inline;

none

隐藏元素。

cssCopy Code
display: none;

inline-block

将元素转换为既有内联元素特性又具备块级元素特性的元素。

cssCopy Code
display: inline-block;

table

将元素转换为表格元素。

cssCopy Code
display: table;

table-cell

将元素转换为表格单元格元素。

cssCopy Code
display: table-cell;

flex

使用flexbox布局。

cssCopy Code
display: flex;

grid

使用grid布局。

cssCopy Code
display: grid;

示例

下面是一个简单的例子，演示了如何使用display属性来控制元素的显示方式：

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS Display示例</title>
  <style>
    .block {
      display: block;
      background-color: gray;
      color: #fff;
      padding: 10px;
      margin-bottom: 10px;
    }
    
    .inline {
      display: inline;
      background-color: #006699;
      color: #fff;
      padding: 10px;
      margin-right: 10px;
    }
    
    .none {
      display: none;
    }
    
    .inline-block {
      display: inline-block;
      background-color: #00CCFF;
      color: #fff;
      padding: 10px;
      margin-right: 10px;
    }
  </style>
</head>
<body>
  <div class="block">块级元素示例</div>
  <span class="inline">内联元素示例</span>
  <div class="inline-block">既用内联元素又用块级元素特性的元素示例</div>
  <div class="none">隐藏元素示例</div>
</body>
</html>

在上述例子中，我们定义了四种不同的display属性值，并使用它们来控制元素的显示方式。例如，.block类和.inline类分别演示了如何将元素转换为块级元素和内联元素。.none类则演示了如何隐藏元素。