CSS3：块元素与行内元素（内联元素）

最新推荐文章于 2023-11-17 15:27:26 发布

原创最新推荐文章于 2023-11-17 15:27:26 发布 · 617 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

HTML5+CSS3 专栏收录该内容

2 篇文章

订阅专栏

本文详细解析了CSS3中的块元素与行内元素的特性，包括它们的默认行为、宽度、高度及排列方式，帮助理解网页布局的基础。

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

CSS3：块元素与行内元素（内联元素）

在了解盒子模型之前，我们先来了解下什么是块元素吧
css中将元素分为了两类，一类是块元素，一类是行内元素，也叫内联元素。

块元素：

①独占一行

<style>
        div {
            width: 200px;
            height: 200px;
            font-size: 60px;
        }

        .div1 {
            background-color: blue;
        }

        .div2 {
            background-color: red;
        }
</style>

    <div class="div1">1</div>
    <div class="div2">2</div>

由于div是使用的最多块元素，所有这里我设置了两个div，并设置了大小和颜色方便对比
在这里插入图片描述

可以看到两个方块并不在同一行，而是各自独占一行。

②默认宽度是父元素全部（撑满父元素）

在去掉对div width的设置后，两个div撑满父元素，父元素body宽度默认为auto，即浏览器的宽度。
在这里插入图片描述

        body {
            width: 800px;
        }

        div {
            /* width: 200px; */
            height: 200px;
            font-size: 60px;
        }

这里我们设置body的宽度为800px
在这里插入图片描述
可以看到div的宽度变成800px，即其父元素body的宽度

③默认高度由内容撑开

这里我将div的高度设置去除，我们看下效果

        /* body {
            width: 800px;
        } */

        div {
            /* width: 200px; */
            /* height: 200px; */
            /* font-size: 60px; */
        }

在这里插入图片描述
可以看到div的高度被内容撑开
我们将字体大小修改成60px后观察效果，理论上，div的高度会比刚才会大，我们看看效果如何吧

        div {
            /* width: 200px; */
            /* height: 200px; */
            font-size: 60px;
        }

如我们所想的，div的高度变高了。
在这里插入图片描述
那如果div中我们没有写任何内容，div高度又会怎么样呢？
我去除了div1中的内容，结果div1就消失了（不是真的消失），在右侧元素中依然可以看到div1的标签，查看后发现div1的高度为0，所以就看不到了。

以上就是块元素的基本特征了，下面看下行内元素的特征吧。

行内元素（内联元素）：

①和块元素相反，它不会独占一行，只会占本身内容大小

<style>
        span {
            font-size: 60px;
        }

        .span1 {
            background-color: blue;
        }

        .span2 {
            background-color: red;
        }
</style>

    <span class="span1">1</span>
    <span class="span2">2</span>

这里我选择使用比较常用的行内元素span，并且设置了不同的背景色，还设置了60px的字体大小方便观察效果
在这里插入图片描述
可以看到两个元素并没有换行
但是我们发现两个元素之间似乎存在一丝缝隙，它不属于任何一个元素
其实是两个span标签存在换行的原因，span是行内元素，而对于代码格式中的换行，浏览器识别成了一个空格，所以才出现了两个元素之间的缝隙

<span class="span1">1</span><span class="span2">2</span>

可以看到，在去掉代码换行后，缝隙消失了。
在这里插入图片描述

②从左往右水平排列，无法容纳时自动换行

从上面的结果可以看到，元素是从左往右排列的，但是是否会一直排列下去呢？
这里修改了字体大小，并增加span元素的个数以观察结果

<style>
        span {
            font-size: 200px;
        }
</style>

    <span class="span1">1</span>
    <span class="span2">2</span>
    <span class="span1">1</span>
    <span class="span2">2</span>
    <span class="span1">1</span>
    <span class="span2">2</span>
    <span class="span1">1</span>
    <span class="span2">2</span>
    <span class="span1">1</span>
    <span class="span2">2</span>
    <span class="span1">1</span>
    <span class="span2">2</span>

在这里插入图片描述
可以看到span也可以换行，在浏览器窗口容纳不下时，会自动换行

③默认宽高都是由内容撑开

从以上字体大小的变化导致元素整体大小的变化可以得出行内元素的默认的宽高都是由内容决定的
若将内容去除，会跟块元素类似，发生消失的情况。

注意：

行内元素是无法设置宽高的，但是有内容区

        span {
            width: 200px;
            height: 200px;
        }

我们去除font-size的设置后，添加width，height的设置
在这里插入图片描述
我们看右下边的模型可以看到，内容区的确是设置成了200 x 200，但是实际并不生效。

关于块元素和行内元素的特征就先整理这么多，当然还有其他关于边距，边框等的特征未整理
当然如果有不对的地方请指正哈。