深入理解css中的margin属性（推荐）

时间：2017-04-09

方法四：给父元素或者子元素声明float;基于例6，在子元素css代码添加float:left;或者在父元素css代码添加float:left;均达到效果，这里不再展示相同的图片。

优点：没有像素的误差。缺点：float有时是不必要的。

方法五：给父元素或者子元素添加position:absolute;属性。同样达到效果。

优点：同方法四。且只要我们不使用top和left也不会有任何影响，所以这也是一种不错的方法。

方法六：给父元素添加overflow:auto;和position:relative;同样达到效果。

第四部分：margin值的单位为%时的几种情况

之前我举例子时使用margin，它的值都是以px为单位的，这个理解起来没有问题。但是如果margin值是以%为单位呢？实际上这时候百分比（%）是相对于该元素的父元素（容器），对于同级元素和父子元素都是如此。（再次感谢博友@小精灵Pawn 提供的建议！！基于此建议补充这部分内容）但是在同级元素中使用竖直方向的margin时会出现意想不到的结果，下面举例说明。

（1）同级元素在水平方向使用值为%的margin

例7：

<head>

    <meta charset="UTF-8">

    <title>margin</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        .first{

            float: left;

            width: 200px;

            height: 200px;

            background: green;

        }

        .second{

            float: left;

            width: 200px;

            height: 200px;

            background: red;

            margin-left: 20%;

        }

    </style>

</head>

<body>

    <div class="first">宽为200，无margin</div>

    <div class="second">宽为200,margin-left为20%;</div>

</body>

</html>

这个例子中，设置两个元素向左浮动，以便于观察两者水平方向的margin。其中左边div无margin，右边div的margin-left为20%，效果如下：

从效果图可以看出两个div之间的间距始终为父元素（这里右边div的父元素即为body，其宽度为浏览器宽度）的20%。

（2）同级元素在竖直方向使用值为%的margin

根据例7的启发，我们可以猜想，如果在竖直方向上使用margin，且值的单位为%,那么最终两者之间的距离将是父元素(上例中为body)的百分数。那么究竟是不是这样呢？看下面的例子。

例8

<head>

    <meta charset="UTF-8">

    <title>margin</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        .first{

            width: 200px;

            height: 200px;

            background: green;

        }

        .second{

            width: 200px;

            height: 200px;

            background: red;

            margin-top: 10%;

        }

    </style>

</head>

<body>

    <div class="first">高为200，无margin</div>

    <div class="second">高为200,margin-top为20%;</div>

</body>

</html>

这里设置上面的div无margin，下面的div的margin-top为10。效果如下：

我们发现，当我在缩小浏览器的高度时，竖直方向上的间距并没有缩小！！！而当我缩小浏览器的宽度时，竖直方向上的距离缩小了！！！

这就说明：统计元素之间在竖直方向上使用margin，当值的单位为%时，它是相对于父元素的宽度。

那么这里为什么不是如我们所希望的那样相对于浏览器的高度呢？知乎上有大神是这样解释的：

（3）父子元素使用值为%的margin

对于父子元素，如果在子元素中使用单位为%margin，那么这个margin值是相对于父元素的宽度和高度（注意：这时的确是相对于父元素的高度！）的。

例9

代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        .father{

            width: 500px;

            height: 300px;

            background: red;

            overflow: hidden;

        }

        .son{

            width: 100px;

            height: 100px;

            background: green;

            margin-top: 20%;

            margin-left: 20%;

        }

    </style>
</head>

<body>

    <div class="father">

        <div class="son"></div>

    </div>

</body>

</html>

共5页:

4/5

上一篇：CSS3 Notes: -webkit-box-reflect实现倒影的实例 下一篇：CSS控制文字换行、裁剪

深入理解css中的margin属性（推荐）

相关文章

最新文章