CSS display默认属性

在CSS中，display属性用于确定元素的显示方式。display属性有多种取值，每种取值代表了不同的显示方式。在没有显式设置display属性的情况下，每个元素都有一个默认的显示方式。

默认值

在CSS中，元素的默认display属性取值是根据元素的类型来确定的。下面是一些常见的元素类型及其默认display属性取值：

<div>：display属性的默认值是”block”，即块级元素。
<span>：display属性的默认值是”inline”，即内联元素。
<p>：display属性的默认值是”block”，即块级元素。
<a>：display属性的默认值是”inline”，即内联元素。
<img>：display属性的默认值是”inline”，即内联元素。

块级元素和内联元素

块级元素和内联元素是display属性的两种常见取值。它们的主要区别在于如何处理元素的宽度和高度以及元素之间的排列方式。

块级元素（block）会在页面中显示为一个块，占据一整行或多整行，可以设置宽度和高度。
内联元素（inline）会在页面中显示为一个行内的元素，只占据它自身的内容大小，不能设置宽度和高度。

示例代码

让我们通过一个简单的示例来演示默认display属性的效果：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Display</title>
<style>
    div {
        border: 1px solid black;
        padding: 10px;
    }

    span {
        border: 1px solid red;
        padding: 5px;
    }
</style>
</head>
<body>
<div>这是一个div元素</div>
<span>这是一个span元素</span>
<p>这是一个p元素</p>
<a href="#">这是一个a元素</a>
<img src="example.jpg" alt="example">
</body>
</html>

在上面的代码中，我们分别创建了一个<div>、<span>、<p>、<a>和<img>元素，并设置了一些简单的CSS样式。这些元素在页面中的显示方式受到它们的默认display属性的影响。