HTML块级元素与行内元素的转变

原创已于 2022-05-08 13:59:36 修改 · 2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #前端

于 2022-05-08 13:50:06 首次发布

本文介绍如何使用CSS display属性将行内元素如span转变为块级元素或行内块元素，通过实例演示了span和div元素的转换过程。

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

借助display属性可转换行内元素及块元素

display值	说明
inline	元素会被显示为内联(行内)元素
block	元素会被显示为块级元素
inline-block	行内块元素

范例：

<html>
    <head>
        <title>块级元素与行内元素的转变</title>
        <style>
            span{
                /* span由行内元素转为块元素 */
                /*display: block;*/
                /* span由行内元素转为行内块元素 */
                display: inline-block;
            }
            div{
                /* div由块元素转为行内元素 */
                display: inline;
            }
        </style>
    </head>
    <body>
        <span>第一个span</span>
        <span>第二个span</span>
        <div>第一个div</div>
        <div>第二个div</div>
    </body>
</html>