标签（空格分隔）： margin塌陷

margin垂直方向塌陷问题：

如下代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>margin塌陷</title>

    <style type="text/css">

        *{

            padding:0;

            margin:0;

        }

       .box1{

           width:300px;

           height:200px;

           background-color:red;

       }

        .box2{

            width:400px;

            height:300px;

            background-color: green;

        }

    </style>

</head>

<body>

    <div class="father">

        <div class="box1"></div>

        <div class="box2"></div>

    </div>

</body>

</html>

执行结果为：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>margin塌陷</title>

    <style type="text/css">

        *{

            padding:0;

            margin:0;

        }

       .box1{

           width:300px;

           height:200px;

           background-color:red;

           margin-bottom: 20px;

       }

        .box2{

            width:400px;

            height:300px;

            background-color: green;

            margin-top: 50px;

        }

    </style>

</head>

<body>

    <div class="father">

        <div class="box1"></div>

        <div class="box2"></div>

    </div>

</body>

</html>

如上述代码的编写过程如下，查看红色盒子和绿色盒子中间的间距为50px;

  • 总结：如果是margin里面的设置下边的margin设置较大，我们可以看做两个盒子，一个是大盒子一个是小盒子，大盒子装着小盒子；

    通过上述的例子可以看到，两个何止之间的间距为50px;

问题2:

如果我们设置浮动呢结果还是这样的吗？

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>margin塌陷</title>

    <style type="text/css">

        *{

            padding:0;

            margin:0;

        }

        .father{

            width:400px;

            overflow: hidden;

            border:1px solid grey;

        }

       .box1{

           width:300px;

           height:200px;

           background-color:red;

           margin-bottom: 20px;

           float:left;

       }

        .box2{

            width:400px;

            height:300px;

            background-color: green;

            margin-top: 50px;

            float:left;

        }

    </style>

</head>

<body>

    <div class="father">

        <div class="box1"></div>

        <div class="box2"></div>

    </div>

</body>

</html>

  • 总结：

    上述的浮动，不存在塌陷问题（即取较大值的问题），中间的高度为margin的和；

margin的垂直方向塌陷的更多相关文章

  1. 2016/2/25 1， margin auto 垂直方向测试 无效 2，margin重叠 3，哪些是块状哪些是内联 4，display：block inline 导航栏把内联转块状最常见+ 扩展

    1.利用margin auto完成首页居中,并自行研究,竖直方向用margin auto,是什么效果#container{width:1002px;margin: 0px auto;}    竖直方向 ...

  2. 触发bfc解决父子元素嵌套垂直方向margin塌陷问题

    首先看一下问题案例 .wrapper{             width: 100px;             height: 100px;             background-colo ...

  3. css 垂直方向 margin 边距 重合

    1:控制两个相邻边盒子之间的距离,在A或者B盒子上用margin控制,就可以控制距离了. 2:父子级之间的元素,常规文档流中,只要垂直外边距直接接触就会发生合并.比如在写header标签时,想移动he ...

  4. CSS居中问题：块级元素和行级元素在水平方向以及垂直方向的居中问题

    元素的居中问题是每个初学者碰到的第一个大问题,在此我总结了下各种块级 行级 水平 垂直 的居中方法,并尽量给出代码实例. 首先请先明白块级元素和行级元素的区别 块级元素 块级元素水平居中 1:marg ...

  5. 《在纹线方向上进行平滑滤波，在纹线的垂直方向上进行锐化滤波》 --Gabor增强的具体实践

    <在纹线方向上进行平滑滤波,在纹线的垂直方向上进行锐化滤波>                                          --Gabor增强的具体实践     一.问 ...

  6. 禁止uiscrollview垂直方向滚动，只允许水平方向滚动；或只允许垂直方向滚动

    禁止UIScrollView垂直方向滚动,只允许水平方向滚动 scrollview.contentSize =  CGSizeMake(你要的长度, 0); 禁止UIScrollView水平方向滚动, ...

  7. 如何让图片在垂直方向与 div的底部对齐 水平居中

    需要图片的绝对定位postion: absolute. 一般定位时, 是用div去定位. 一般不直接用 非div去"绝对/相对"定位. 如不直接用 等去定位. 因为这些好像不好定位 ...

  8. HTML-移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中

    pc端让一个弹窗水平和垂直方向居中,在知道弹窗宽高的情况下很好计算,只需要用如下css即可: #date{ width: 300px; height: 300px; position: absolut ...

  9. Android RecyclerView（瀑布流）水平/垂直方向分割线

     Android RecyclerView(瀑布流)水平/垂直方向分割线 Android RecyclerView不像过去的ListView那样随意的设置水平方向的分割线,如果要实现Recycle ...

随机推荐

  1. Python连接Oracle数据查询导出结果

    python连接oracle,需用用到模块cx_oracle,可以直接pip安装,如网络不好,可下载离线后本地安装 cx_oracle项目地址:https://pypi.org/project/cx_ ...

  2. C89 和 C99 标准比较

    注1: GCC支持C99, 通过 --std=c99 命令行参数开启,如: 代码:gcc --std=c99 test.c    注2:FFMPEG使用的是C99.而VC支持的是C89(不支持C99) ...

  3. (转)Windows 平台下解决httpd.exe: syntax error on line 39

    近来在研究PHP,结果为了Apache的安装伤神不已...小白我在安装后,启动Apache的服务虽然可以,不过,在Apache sevice monitor 中启动services时就会出现如下的问题 ...

  4. C语言编程漫谈——main函数

    写在前面 促使我写这篇文章是因为我这几天找了几个一样是大三的同学,与我相同专业相同方向(物联网)的人,除了@小胡同的诗,基本没有什么其他人会现在看起来很简单的编程题目了.问了一下其他同学,他们大部分都 ...

  5. nginx+多个tomcat

    学习nginx的时候遇到的问题:nginx怎么部署两台tomcat?   upstream 在网上找的资源,我在nginx配置文件(nginx.conf)中添加了两个server.结果只显示第一个se ...

  6. 更多的bash命令

    深入介绍Linux系统管理命令,可以使用这些命令处理系统上的数据文件: 1.监控程序 1.1.进程的查看 ps 查看进程 GNU ps 命令支持3种不同的命令行参数: 1.Unix类型参数,前面一条短 ...

  7. postgresql清理工具

    1. 每个DB都单独进行了vacuumdb的命令: vacuumdb -d mydb -z -v 2. full vacuum : vacuumdb -a  -f -z -v  .  自动vacuum ...

  8. jq中的$操作符与其他js框架冲突

    解决办法: jq中存在方法:noConflict() 可返回对 jQuery 的引用. 使用示例: var jq = $.noConflict(); jq(document).ready(functi ...

  9. ORM版学员管理系统 3

    老师信息管理 思考 三种方式创建多对多外键方式及其优缺点. 通过外键创建 class Class(models.Model): id = models.AutoField(primary_key=Tr ...

  10. 深度学习实践-物体检测-faster-RCNN(原理和部分代码说明) 1.tf.image.resize_and_crop(根据比例取出特征层，进行维度变化) 2.tf.slice(数据切片) 3.x.argsort()(对数据进行排列,返回索引值) 4.np.empty(生成空矩阵) 5.np.meshgrid(生成二维数据) 6.np.where(符合条件的索引) 7.tf.gather取值

    1. tf.image.resize_and_crop(net, bbox, 256, [14, 14], name)  # 根据bbox的y1,x1,y2,x2获得net中的位置,将其转换为14*1 ...