CSS 的元素显示模式---块级和行级的元素_显示为块级元素代码-优快云博客

本文介绍了CSS中元素的显示模式，包括块元素、行内元素和行内块元素，以及如何通过display属性进行转换，以实现更灵活的页面布局。例如，使用display:block;使元素变为块级，display:inline;变为行内元素，display:inline-block;则为行内块元素，允许在同一行显示多个div。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

资料来源于黑马pink老师的课程

了解元素的显示模式可以更好的让我们布局页面.

什么是元素的显示模式
元素显示模式的分类
元素显示模式的转换

2.1 什么是元素显示模式
在这里插入图片描述
2.2 块元素

2.2 行内元素

2.3 行内块元素

2.4 元素显示模式总结

2.5 元素显示模式转换

例如将多个div在同一行显示。

转换为块元素：display:block;
转换为行内元素：display:inline;
转换为行内块：display: inline-block;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>元素显示模式转换</title>
    <style>
        a {
            width: 150px;
            height: 50px;
            background-color: pink;
            /* 把行内元素 a 转换为 块级元素 */
            display: block;
        }

        div {
            width: 300px;
            height: 100px;
            background-color: purple;
            /* 把 div 块级元素转换为行内元素 */
            display: inline;
        }

        span {
            width: 300px;
            height: 30px;
            background-color: skyblue;
            display: inline-block;
        }
    </style>
</head>

<body>
    <a href="#">金星阿姨</a>
    <a href="#">金星阿姨</a>
    <div>我是块级元素</div>
    <div>我是块级元素</div>
    <span>行内元素转换为行内块元素</span>
    <span>行内元素转换为行内块元素</span>
</body>

</html>