浮动与display:inline-block

390 查看

有的时候，我们需要使独占一行的两个div能够在一行和谐共处，解决方案大概有两种：
1.为两个div均添加display:line-block属性
2.将两个div都设成浮动的元素
这篇文章将深入探讨二者的区别与联系，此外，还将会带给大家一种垂直居中的新方式
我们将以下面的代码作为演示代码，这意味着每当我们讨论一个新问题时就要把代码恢复成下面这个样子：
CSS样式：

    <style>
        .myContainer{
            width: 500px;
            margin: 20px auto;
            background-color: gray;
            overflow: hidden;
        }

        .div1{
            width: 200px;
            height: 100px;
            background-color: red;
        }

        .div2{
            width: 200px;
            height: 100px;
            background-color: aqua;
        }
    </style>

html内容：

<div class="myContainer">
    <div class="div1"></div>
    <div class="div2"></div>
</div>
<div class="myContainer">
    <div class="div1"></div>
    <div class="div2"></div>
</div>

运行后的效果：
这里写图片描述

1.最基本的区别在于中间是否有空隙

我们首先试着将前两个div都添加属性display:inline-block，后两个div都设置成左浮动。运行效果如下所示：
这里写图片描述
很显然，由于属性display:inline-block而在一行的块级元素中间会出现间隙，而浮动则不会。

2.面对不同的高度，对齐方式不同

将代码恢复成演示代码，我们将类选择器div2的height属性设置成300px，查看运行效果：
这里写图片描述
会发现在两个div的高度不同时，两种方式的对齐效果也不相同：
（1）display:inlne-block属性修饰的元素没有脱离文档流，当然会与在正常的文档流中的元素一样采取的底端对齐方式。
（2）float属性修饰的元素在一定程度上脱离了普通文档流的限制，只用考虑向某个方向浮动，所以会产生如图的效果。
使用display:inlne-block的好处在于我们可以通过一个叫做vertical-align的属性来控制两个元素的对齐方式：
（1）我们为前两个div分别添加一个属性：vertical-align:middle

<div class="myContainer">
    <div class="div1" style="display: inline-block;vertical-align: middle"></div>
    <div class="div2" style="display: inline-block;vertical-align: middle"></div>
</div>

查看一下运行效果：（这里我省去了后两个浮动元素的截图）
这里写图片描述
发现div1出现在了div2的居中位置。
这里要注意，这两个元素一定都要添加上vertical-align这个属性。
当然，如果想让它们顶端对齐，把middle改成top就可以了，截图如下：

括展：垂直居中的新方式：

会思考的朋友会想到利用这种方式可以实现子div在父div内的垂直居中。原理很简单，在父div内设置两个子div：div1,div2,其中div1是我们要垂直居中的元素,div2是辅助元素。我们让div2的宽度为0，高度为父div的高度，然后将div1和div2都加上display:inline-block和vertical-align:middle。之后，便可实现垂直居中。代码如下所示（这里使用text-align:center保证水平居中）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直居中的新方法</title>
    <style>
        .myContainer{
            width: 500px;
            height: 300px;
            margin: 10px auto;
            background-color: gray;
            text-align: center;
        }

        .div1{
            width: 200px;
            height: 100px;
            background-color: red;
            display: inline-block;
            vertical-align: middle
        }

        .div2{
            width: 0;
            height: 100%;
            background-color: aqua;
            display: inline-block;
            vertical-align: middle
        }
    </style>
</head>
<body>
<div class="myContainer">
    <div class="div1"></div>
    <div class="div2"></div>
</div>
</body>
</html>

效果如图所示：
这里写图片描述

4.浏览器缩放时的区别

有的时候我们需要在父div的一排内安置两个子div,二者的宽度固定为某个像素，中间空余一定距离。这样也存在有两种方案：
（1）两个子div一个向左浮动，一个向右浮动

<div class="myContainer">
    <div class="div1" style="float: left"></div>
    <div class="div2" style="float: right"></div>
</div>

这里写图片描述
（2）将它们设置为display:inline-block,然后通过margin来设置两者间的距离：

<div class="myContainer">
<!--XXX为符合条件的具体值-->
    <div class="div1" style="display: inline-block;margin-right: XXXpx"></div>
    <div class="div2" style="display: inline-block;"></div>
</div>

这里写图片描述
这两种方式在父div的宽度为具体像素时几乎没有区别，但当父div的宽度为百分比时，则具有明显的差别：
现在我们将myContainer中的width设置为50%，查看效果，似乎也无差别，但当我们缩放浏览器时，就会发现：
这里写图片描述
不过父div的宽度一般都是固定的，最后一点大可不必担心。

总结：

display:inlne-block与浮动各有各的优缺点与灵活之处,大家在选择的时候可以结合我列举的几点综合考虑。