CSS块级元素与行内元素

star9595

于 2018-05-07 20:52:50 发布

阅读量172

点赞数

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/u014042372/article/details/80224308

版权

CSS 专栏收录该内容

9 篇文章

订阅专栏

本文通过HTML示例详细介绍了网页布局中块级元素与行内元素的区别及转换方法。块级元素如div和h1等默认独占一行且可以设置宽高，而行内元素如span和a等则与其他行内元素并排显示且无法直接设置宽高。通过CSS的display属性可以相互转换。

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

块级元素与行内元素

<!DOCTYPE html>
<html lang="en">
<!--css3选择器-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        h1{
            background-color: pink;
        }
        span{
            background-color: red;
        }

        /*设置display:inline 属性则块级元素会转为行内元素*/
        div{
            display: inline;
            background-color: red;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div>
        <!--块级元素
        1. 霸占一行，不能与其他元素并列
        2. 能接受宽、高
        3. 如果不设置宽度，则默认为父亲标签的100%-->
        <!--容器级 div h系列 li dt dd;
        容器级为块级元素-->
        <!--设置display:inline 属性则块级元素会转为行内元素-->
        <h1>哈哈</h1>
        <h1>嘻嘻</h1>

        <!--行内元素
        1. 与其他行内元素并排
        2. 不能设置宽高，默认的宽高即为文字的宽度-->
        <!--文本级 p span a；
        文本级为行内元素，p是文本级但是是块级元素-->
        <!--设置display:block 属性则行内元素会转为块级元素-->
        <span>哈哈</span>
        <span>嘻嘻</span>
    </div>

    <div>
        我是个div
    </div>
    <div>我是div</div>

</body>
</html>