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

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>

运行效果:

原文发布于微信公众号 - 小工匠技术圈(xgn177971793771)

原文发表时间:2018-07-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏python3

tkinter -- Scale

创建一个垂直 Scale,最大值为100,最小值为0,步距值为1。这个参数设置也就是 Scale的缺省设置了

10430
来自专栏前端说吧

css笔记 - 张鑫旭css课程笔记之 relative 篇

限制描述:absolute设置了方位值时,这些方位值是相对于position不为static的最近的父元素来定位的。如果父元素设置了relative,方位值就会...

8520
来自专栏落影的专栏

Metal图像处理——颜色查找表(Color Lookup Table)

一张1024x1024的普通图片,是由1024 * 1024=1048576个像素点组成,每个像素点包括RGBA共32bit,常见的图像处理是对相邻像素点颜色、...

46260
来自专栏进击的君君的前端之路

CSS理解之z-index

26440
来自专栏前端说吧

css笔记 - 张鑫旭css课程笔记之 z-index 篇

 z-index可以决定哪个元素覆盖在哪个元素上边。(这个学过ps的,想象一下图层的概念,z-index就像是调整图层的上下顺序。)

10310
来自专栏杨龙飞前端

line-height属性总结

19330
来自专栏前端黑板报

canvas-画线

坐标系统简析 ? 左边是笛卡尔坐标系,右边是canvas坐标系。 笛卡尔坐标系(Cartesian coordinate system): 也称直角坐标系,是一...

26990
来自专栏黒之染开发日记

【easeljs】矢量形状 Shape类

一个Shape(形状)允许你在显示列表中显示矢量图。它包含一个带有所有绘制矢量图形的方法的Graphics(图形)实例。Graphics实例可以在多个Shape...

13330
来自专栏林德熙的博客

WPF 在 DrawingContext 的 push 如何使用

如果在一个 DrawingContext 画出一个 DrawingVisual ,如何修改这个 DrawingVisual 的大小,对他进行变换?

20710
来自专栏向治洪

Android开发之Path详解

在制作高级控件的时候往往会用到很多的高级数学公式,例如本文将要讲到的贝塞尔曲线,结合Path使用,可以实现很多复杂的动画效果。 一.Path常用方法表 作...

52750

扫码关注云+社区

领取腾讯云代金券