inline、block、inline-block元素的区别—详细

要想真正的了解这三者的区别,首先你要知道这三者在页面中展现是什么效果,下面我们就拿一些demo来说下。
1.1.前inline元素,后block元素

<style>
    *{
        margin: 0;
        padding: 0;
        outline: none;
    }
    body{
        margin: 20px;
    }
    .before{
        background: red;
    }
    .right{
        width: 100px;
        height: 100px;
        background: green;
    }
</style>
<span class="before">
    inline区块在前,block元素会如何排列呢?
</span>

<div class="right"></div>

效果如下图:
4
可以看到不管inline元素是否能占满一行,block元素都是另起一行进行展现。
1.2.前block元素,后inline元素

<style>
    *{
        margin: 0;
        padding: 0;
        outline: none;
    }
    body{
        margin: 20px;
    }
    .container{
        width: 500px;
        background: blue;
        padding: 5px;
    }
    .left{
        width: 200px;
        height: 200px;
        background: red;
    }
    .after{
        background: green;
    }
</style>

<div class="container">
    <div class="left">
        
    </div>

    <span class="after">
        block区块在前,inline元素会如何排列呢?
    </span>
</div>

效果如下图:
5
可以看到不管block元素是否宽度等于一行的宽度,block元素都是占满一行的。且block元素未填满行的地方,都是margin.对block元素设置margin只有margin-left生效.

1.3.前inline元素,后inline元素

<style>
    *{
        margin: 0;
        padding: 0;
        outline: none;
    }
    body{
        margin: 20px;
    }
    .container{
        width: 200px;
        background: blue;
        padding: 5px;
    }
    .before{
        background: red;
    }
    .after{
        background: green;
    }
</style>

<div class="container">
    <span class="before">
        第一个inline元素:inline区块在前,inline元素会如何排列呢?
    </span>

    <span class="after">
        第二个inline元素:inline区块在前,inline元素会如何排列呢?
    </span>
</div>

效果如下图:
6
可以看到inline元素紧接着inline元素排列,未占满一行,则进行补位。
1.4.前block元素,后block元素

<style>
    *{
        margin: 0;
        padding: 0;
        outline: none;
    }
    body{
        margin: 20px;
    }
    .left{
        width: 100px;
        height: 100px;
        background: red;
    }
    .right{
        width: 100px;
        height: 100px;
        background: green;
    }
</style>

<div class="container">
    <div class="left"></div>

    <div class="right"></div>
</div>

效果如下图:
7
可以看到block元素各占一行.
1.5.前inline元素,后inline-block元素
1.5.1.inline-block元素宽度小于或者等于一行的宽度

<style>
    *{
        margin: 0;
        padding: 0;
        outline: none;
    }
    body{
        margin: 20px;
    }
    .container{
        width: 400px;
        background: blue;
        padding: 5px;
    }
    .before{
        background: red;
    }
    .after{
        background: green;
        display: inline-block;
    }
    .middle{
        background: #fdf;
    }
</style>

<div class="container">
    <span class="before">
        inline元素在前,inline-block元素会如何排列呢?
    </span>

    <span class="after">
        inline在前,inline-block元素会如何排列呢?
    </span>
    <span class="middle">
        inline区块在前,inline-block元素会如何排列呢?
    </span>
</div>

效果如下图:
8
可以看到inline-blcok元素与block相似另起一行展示,但是又与block元素不同,可以被inline元素紧跟
1.5.2.inline-block元素宽度大于一行的宽度

<style>
    *{
        margin: 0;
        padding: 0;
        outline: none;
    }
    body{
        margin: 20px;
    }
    .container{
        width: 200px;
        background: blue;
        padding: 5px;
    }
    .before{
        background: red;
    }
    .after{
        background: green;
        display: inline-block;
        width: 100px;
        height: 150px;
    }
    .middle{
        background: #fdf;
    }
</style>

<div class="container">
    <span class="before">
        inline元素在前面展示,inline-block元素会如何排列呢?
    </span>

    <span class="after">
        inline区块在前,inline-block元素会如何排列呢?
    </span>
    <span class="middle">
        inline区块在前,inline-block元素会如何排列呢?
    </span>
</div>

效果如下图:
9
可以看到inline-blcok元素与inline相似,紧跟在inline元素后面,也可被inline元素紧跟,但又与inline元素不同,其内部元素自成一行。

此条目发表在CSS分类目录。将固定链接加入收藏夹。

发表评论

电子邮件地址不会被公开。 必填项已用*标注