[Java小工匠]CSS盒子模型-边距合并

Java小工匠

发布于 2018-08-10 12:00:07

1.1K00

代码可运行

文章被收录于专栏：小工匠技术圈小工匠技术圈

运行总次数：0

代码可运行

1、CSS外边距合并

CSS外边距合并，只有上外边距和下外边距才会触发外边距合并，左外边距和右外边距不会。

2、相邻元素合并-上下

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相邻合并</title>
    <style type="text/css">
        .div{
            width: 100px;
            height: 100px;
            background: red;
            margin:100px;
        }
    </style>
</head>
<body>
    <div class="div">div1</div>
    <div class="div">div2</div>
</body>
</html>

运行效果如下： div1和div2 根据盒子模型的计算规则，div1下边距100px和div2上边距100px，理论应该是200px。实际CSS规则是合并的，因此div1和div2 之间的距离为100px;如果div1的下边距和div2的上边距，边距值不一样，那么以最大的边距为最终取值。

image.png

3、父子元素合并-上下

源代码： ```

div2

运行结果： div2是div1的子元素，完全安装盒子模型，div2应当距离浏览器顶部100px+父元素100px =200px。因为上下边距合并，所以div2距离顶部100px；由于左右边距不合并，所以div2距离浏览器左边的距离是200px。
![image.png](http://upload-images.jianshu.io/upload_images/6260202-50bf19a8d9e7cc1b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
###4、Margin穿透问题
###4.1  Margin穿透效果演示
源代码：
 ```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Margin穿透问题</title>
    <style type="text/css">
        body{
            margin: 0px;
        }
        .header{
            height: 100px;
            background: red;

        }
        .logo{
            background: blue;
            width: 60px;
            height: 60px;
            margin-top: 40px;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="logo"></div>
    </div>
</body>
</html>

远行结果：代码本意，header固定在浏览器顶部，当给logo的div添加上一个margin-top，header距离浏览器顶部由于父子元素合并所以出现了这个问题。

穿透

4.2 解决Margin穿透1-BFC

可以使用overflow:hidden,触发BFC模型解决这个问题，有专门章节介绍BFC模型。

4.3 解决Margin穿透2-插入元素

在父元素中，插入一个高度、宽度都是0px的隐藏元素.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Margin穿透问题</title>
    <style type="text/css">
        body{
            margin: 0px;
        }
        .header{
            height: 100px;
            background: red;

        }
        .logo{
            background: blue;
            width: 60px;
            height: 60px;
            margin-top: 40px;
        }
        .before{
            width: 0px;
            height: 0px;
            overflow: hidden;
            visibility: hidden;

        }
    </style>
</head>
<body>
    <div class="header">
        <div class="before"></div>
        <div class="logo"></div>
    </div>
</body>
</html>

4.4 解决Margin穿透3-:before

与插入元素的思路一致，使用伪元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Margin穿透问题</title>
    <style type="text/css">
        body{
            margin: 0px;
        }
        .header{
            height: 100px;
            background: red;

        }
        .logo{
            background: blue;
            width: 60px;
            height: 60px;
            margin-top: 40px;
        }
        .header:before{
            width: 0px;
            height: 0px;
            display: block;
            content: 'clear';
            overflow: hidden;
            visibility: hidden;

        }
    </style>
</head>
<body>
    <div class="header">
        <div class="logo"></div>
    </div>
</body>
</html>

5、空元素合并

源代码：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>空元素合并</title>
        <style type="text/css">
            .div1{
                width: 100px;
                height: 100px;
                background: blue;
            }
            .div2{
                margin-top: 50px;
                margin-bottom: 100px;
            }
            .div3{
                width: 100px;
                height: 100px;
                background: red;
            }
        </style>
    </head>
    <body>
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </body>
    </html>

运行结果： div2 理论占据150px=上边距+下边距，实际占用了100px。因为空元素上下边距合并。如果div2的内容添加文字，显示效果将会有巨大差异。

image.png

6、左右不合并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左右不合并</title>
    <style type="text/css">
    .div1{
        overflow: hidden;
    }
    .div11{
        margin-right: 100px;
        width: 200px;
        height: 100px;
        float: left;
        border: 1px solid red;
    }
    .div12{
        margin-left: 100px;
        float: left;
        width: 200px;
        height: 100px;
        border: 1px solid red;
    }
    .div2{ 
        margin-top: 10px;
        width: 602px;
        border: 1px solid red;
        height: 100px;
    }
    </style>
</head>
<body>
    <div class="div1">
        <div class="div11">margin-right100px</div>
        <div class="div12">margin-left100px</div>
    </div>
    <div class="div2">
        200(div11宽度)+1px(div11右边框)+100px(div11右边距)+<br/>
        200(div12宽度)+1px(div12左边框)+100px(div12左边距)<br/>
    </div>
</body>
</html>

运行效果：

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2018-07-24，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自小工匠技术圈微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度