CSS margin属性详解

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>

这种使得元素居中的方法的缺点就是:你必须知道这个绝对定位元素宽度以及高度才能通过设置负margin值,使其相对于浏览器窗口(父元素)居中,若对于不确定宽度和高度,则不能用这种方法,可以使用:

transform: translate3d(-50%,-50%,0);

对于margin负值来说,不止有这两个实现,还会有其他各种用途,这里暂不一一细讲。
本篇详解就到这里结束了:),希望你看了文章有所收获,欢迎各种交流!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值