元素显示模式转换：行内元素，块级元素，行内块元素的转换

小阿兜

于 2020-06-22 22:24:00 发布

阅读量2.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.csdn.net/weixin_43814020/article/details/106911351

css 专栏收录该内容

3 篇文章

订阅专栏

本文深入探讨了CSS中display属性的使用，详细解释了如何将行内元素转换为块级元素，块级元素转换为行内元素，以及行内元素转换为行内块元素的方法，通过具体的代码实例展示了不同元素在页面布局中的表现形式。

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

<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>


<body>
    <a href="#">行内元素 a 转换为块级元素</a>
    <a href="#">行内元素 a 转换为块级元素</a>
    <div>块级元素转换为行内元素</div>
    <div>块级元素转换为行内元素</div>
    <span>行内元素转换为行内块元素</span>
    <span>行内元素转换为行内块元素</span>
</body>