display:inline-block一些注意点

闲某说

它是干什么的

我们知道display:inline 和display:block的用发了，他们的作用是将块级元素转化为内联元素或者是内联元素转化为块级元素。

现在的这个貌似是两个的结合体：inline-block

从英文中可以初步理解到：-代表的前缀，意思应该是block 具备 inline的性质，也可以说，让块级元素在一行显示的性质。

1.作用在block上面的display:inline-block

你可能会问：让block具备inline的性质，直接用display:inline不就可以了？

如果你有这个疑问，那就一起探究一下：

<body>
    <div class="father">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>

</body>

css:

.block {
    width:50px;
    height:50px;
    background-color:#ccc;
    margin:10px;
}

接下来就是加入display:inline;你会发现神奇的东西：

wow！理解了吗？像我们讲过的一样，转化为inline之后，除了图像之外，就不能设置宽高了！

这就是display:inline-block 的意义所在了

这个时候，我们加入display:inline-block;神奇的事情发生了！

我们明白了：inline-block是元素具备了两种（块级和内联）元素的功能，inline最重要的一点就是：元素能够在一行展示，而inline元素所缺失的设置宽高，也是block 元素的功能，从而两个联手，展现出了如图的效果。

如果说设置inline-block的元素具备了两个功能，那么被作用这个元素不只局限在块级元素上面。下面就看一下内联元素的展示：

2.作用在inline的display:inline-block

代码：

<body>
    <div class="father">
        <span>hello</span>
        <span>hello</span>
        <span>hello</span>
        <span>hello</span>
        <span>hello</span>
        <span>hello</span>
    </div>
</body>


div {
    border:1px solid black;
}
span {
    background-color:#ccc;
}

可以看到内联元素整整齐齐的排列，由于关于内联元素的布局，前面已经说过，在此不再阐述。

加入display:inline-block 并为它设置宽度之后：

div {
    border:1px solid black;
}
span {
    display:inline-block;
    background-color:#ccc;
    width:20px;
    height:20px;
}

可以看出来确实可以设置宽和高了！

这时将最后一个元素添加last类，然后为其设置高度

.last {
    width:50px;
    height:30px;
}

你可能猜到了我的用意，我在想这个时候的span元素是不是真正的变成了inline-block，还是说它只是表现成了inline-block；

当看到结果的时候，我觉得我们可以认为它真的具备了block的属性，确确实实的改变了！

3. inline-block的高度不同的情况

我们之前设置的元素，在inline-block的时候，他们的大小都是相同的，但是现实来说，很有可能有高度大小不一样的情况，它们在排布的时候会不会和我们想的不一样呢？

<body>
    <div class="father">
        <div class="block1"></div>
        <div class="block2"></div>
        <div class="block3"></div>
        <div class="block4"></div>
        <div class="block5"></div>
    </div>

</body>



.father .block1 {
    display:inline-block;
    width:100px;
    height:50px;
    background-color:#ccc;
}
.father .block2 {
    display:inline-block;
    width:50px;
    height:100px;
    background-color:#ccc;
}
.father .block3 {
    display:inline-block;
    width:150px;
    height:40px;
    background-color:#ccc;
}
.father .block4 {
    display:inline-block;
    width:200px;
    height:150px;
    background-color:#ccc;
}
.father .block5 {
    display:inline-block;
    width:100px;
    height:20px;
    background-color:#ccc;
}