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>

效果如下图：

可以看到不管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>

效果如下图:

可以看到不管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>

效果如下图：

可以看到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>

效果如下图：

可以看到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>

效果如下图：

可以看到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>

效果如下图：

可以看到inline-blcok元素与inline相似，紧跟在inline元素后面，也可被inline元素紧跟，但又与inline元素不同，其内部元素自成一行。