CSS margin属性详解

最新推荐文章于 2022-01-06 07:30:00 发布

man_tutu

最新推荐文章于 2022-01-06 07:30:00 发布

阅读量6.7k

点赞数 9

分类专栏： CSS 文章标签： css margin margin负值 margin合并双飞翼布局

本文链接：https://blog.csdn.net/man_tutu/article/details/54987177

版权

CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

CSS margin属性详解

我发现当我想写好一篇博文的时候，希望以后能有人看到，会对别人也有一定的帮助，这时候对于其中的内容就变得深思熟虑起来，让自己查阅尽可能多的资料，这样的方式正好可以弥补我某些方面的不足，让我能够深入了解一些可能平常不太注意的知识点，哈哈，但可能还是会存在局限性：P。如果能坚持写博文的话，一定会是一件超棒的事情。这些就只是我自己的碎碎念：）~

盒子模型

讲到margin，不可避免的就又要说到盒子模型，盒子模型包括了：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性（这里只说W3C标准的盒子模型）。如下图所示：

这里写图片描述

margin相关属性

margin简写属性在一个声明中设置所有外边距属性。该属性可以有1-4个值。margin的默认值是0。没有继承性，也就是说给父元素设置的margin值并不会自动传递到子元素中。

一个参数

margin: 10px;

所有4个外边距都是10px

两个参数

margin: 10px 5px;

上外边距和下外边距是10px
右外边距和左外边距是5px

三个参数

margin: 10px 5px 15px;

上外边距是10px
右外边距和左外边距是5px
下外边距是15px

四个参数

margin: 10px 5px 15px 20px;

上外边距是10px
右外边距是5px
下外边距是15px
左外边距是20px

设置四个外边距的顺序是上、右、下、左，请记住顺时针即可。

margin外边距合并

块级元素的垂直相邻外边距会合并
如下图所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin</title>
    <style>
        div {
            margin: 20px;
            color: #fff;
        }
        .top {
            background: green;
        }
        .bottom {
            background: orange;
        }
    </style>
</head>
<body>
    <div class="top">margin: 20px</div>
    <div class="bottom">margin: 20px</div>
</body>
</html>

且其垂直相邻外边距合并之后的值为上元素的下外边距和下元素的上外边距的较大值。
如下图所示：
这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin</title>
    <style>
        div {
            color: #fff;
        }
        .top {
            background: green;
            margin: 40px;
        }
        .bottom {
            background: orange;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="top">margin: 40px</div>
    <div class="bottom">margin: 20px</div>
</body>
</html>

而行内元素实际上不占上下外边距。
如下图所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin</title>
    <style>
        span {
            margin: 20px;
            background: orange;
            color: #fff;
        }
    </style>
</head>
<body>
    <span>margin: 20px</span>
</body>
</html>

行内元素的的左右外边距不会合并。
如下图所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin</title>
    <style>
        span {
            margin: 20px;
            background: orange;
            color: #fff;
        }
    </style>
</head>
<body>
    <span>margin: 20px</span>
    <span>margin: 20px</span>
</body>
</html>

浮动元素的外边距也不会合并。
如下图所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin</title>
    <style>
        div {
            float: left;
            margin: 20px;
            background: orange;
            color: #fff;
        }
    </style>
</head>
<body>
    <div>margin: 20px</div>
    <div>margin: 20px</div>
    <div>margin: 20px</div>
    <div>margin: 20px</div>
    <div>margin: 20px</div>
    <div>margin: 20px</div>
    <div>margin: 20px</div>
</body>
</html>

margin负值

左右固定，中间自适应（双飞翼）

双飞翼布局的好处：
1、主要的内容先加载的优化；
2、在浏览器上的兼容性非常好，IE6及以上都支持；
3、实现不同的布局方式，可以通过调整相关CSS属性即可实现。
实现效果如下图所示：
这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            color: #fff;
            height: 200px;
        }
        .center {
            float: left;
            width: 100%;
        }
        .center .content {
            margin: 0 210px 0 110px;
            background: orange;
        }
        .left {
            float: left;
            width: 100px;
            margin-left: -100%;
            background: green;
        }
        .right {
            float: left;
            margin-left: -200px;
            width: 200px;
            background: green;
        }
    </style>
</head>
<body>
    <div class="center">
        <div class="content">center</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</body>
</html>

用于水平垂直居中

一个居中的div

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -50px;
            background: orange;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>