CSS布局 ——margin重叠

一、margin collapsing现象：
BFC（block formatting context）中相邻的两个block-level的盒，上一个box的下边距会跟下一个box的上边距发生叠加；margin collapse的三种情况：
1.相邻兄弟元素；
2.父级和第一个/最后一个元素；
3.空的block父子margin。
margin collapse的其他条件
1.父子重叠的其他条件
margin-top重叠：
1.父元素非块状格式化上下文（BFC）（例：overflow：hidden）；
2.父元素没有border-top/padding-top设置;
3.父元素和第一个子元素之间没有inline元素分隔。
margin-bottom重叠：
1.父元素非块状格式化上下文（BFC）（例：overflow：hidden）；
2.父元素没有border-bottom/padding-bottom设置;
3.父元素和最后一个子元素之间没有inline元素分隔；
4.父元素没有Height,min-height,max-height限制。
空block元素：
1.元素没有border设置；
2.元素没有padding值；
3.里面没有inline元素；
4.没有height或者min-height。
margin重叠的计算规则
1.正正取大值；
2.正反值相加；
3.负负最负值；
margin重叠举例：请移步寒冬博客：http://www.cnblogs.com/winter-cn/archive/2012/11/16/2772562.html

二、margin改变尺寸
1、margin与可视尺寸（clientWidth）
margin会影响可视尺寸但是以下两种情况不会：
a.适用于没有设定width/height的普通block元素；
b.只适用于水平尺寸。
2、margin与占据尺寸
a.block/inline-block水平元素均适用；
b.与有没有设定width/height值无关；
c.适用于水平和垂直方向

二、margin水平垂直百分比
普通元素的百分比margin都是相对于容器的宽度计算的；
绝对定位元素的百分比margin是相对于第一个非static父元素的宽度计算的。
二、深刻理解margin auto

如果一侧是定值，一侧是auto,auto为剩余空间大小
如果两侧均是auto,则平分剩余空间——即居中

img{
    width: 20px;
    margin: 0 auto;
}

图片不居中，此时图片是inline水平，就算有width,其也不会占据整个容器的行。

注意：就算容器定高，margin: auto 0 ;无法垂直居中，需要writing-model:vertical-lr更改流为垂直方向。
例如：

<head>
    <title></title>
</head>
<style>
     body{
        margin:0;
        padding:0;
    }
    .father{
        height: 200px;
        width: 1000px;
        writing-mode:vertical-rl;
        background-color: green;
    }
    .son{
        height: 100px;
        width: 500px;
        margin:auto;
        background-color:blue;
    }
</style>
<body>
<div class="father">
        <div class="son">SON</div>
    </div>
</body>
</html>

这里写图片描述

三、负值margin的应用
1.margin负值下的两端对齐
原理：设定宽度的margin可以改变其元素宽度大小，
正值使宽度变小，负值使宽度变大

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style>
     body{
        margin:0;
        padding:0;
    }
    .box{
        width: 960px;
        margin: 0 auto;
        background-color: orange;
    }
    ul{
        overflow: hidden;
        padding: 0px;
        margin-right: -20px;
    }
    li{
        width:225px;
        height: 300px;
        margin-right: 20px;
        background-color:green;
        float: left;
    }
</style>
<body>
<div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
</div>
</body>
</html>

这里写图片描述

注意：ul 的 overflow: hidden;不可省略，实现ul BFC布局。
2.上下等高布局

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style>
     body{
        margin:0;
        padding:0;
    }
    .box{
        overflow: hidden;
        /* resize: vertical; */
        background-color: yellow;
    }
    .green, .orange{
        margin-bottom: -600px;
        padding-bottom: 620px;
        margin-left:100px;
    }
    .green{
        background-color:green;
        float: left;
    }
    .orange{
        float: left;
        background-color: orange;
    }
</style>
<body>
<div class="box">
        <div class = "green">Green</div>
        <div class = "orange">Orange</div>
</div>
</body>
</html>

这里写图片描述
关键技术：最外部div采用BFC布局，内部容器div设置大的底部边框，然后用数值相似的负外边距消除这个高度。将box设置为overflow: hidden;，列就在最高点被裁切，给每个元素设置620像素的底部内边距和-600像素的底部外边距，20像素的差值就在每个框底部形成可见的内边距。
3.margin负值下的两栏自适应布局

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title></title>
</head>
<style>
     body{
        margin:0;
        padding:0;
    }
    .box {
        float:left;
        width:100%;

    }
    p{
        margin-right:170px;
    }
    img{
        float:left;
        width:150px;
        margin-left:-150px;

    }

</style>
<body>
<div class="box">
        <p>Green，我喜欢的喵咪，我喜欢的喵咪，我喜欢的喵咪，我喜欢的喵咪，我喜欢的喵咪，我喜欢的喵咪，我喜欢的喵咪，我喜欢的喵咪，我喜欢的喵咪，我喜欢的喵咪，我喜欢的喵咪，我喜欢的喵咪，我喜欢的喵咪，我喜欢的喵咪，我喜欢的喵咪</p>
</div>
<img src="1.jpg" alt="miao">
</body>
</html>

这里写图片描述
元素占据的空间会随着margin移动。img的负值margin恰好给图片预留了widt宽度。

CSS布局 ——margin重叠

猜你喜欢