如果两个盒子是包含关系，如果让子盒子在父盒子之内向下平移100px：（margin塌陷现象）
解决方案: padding , border , overflow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>/*margin塌陷*/
        .box1 {
            width: 250px;
            height: 250px;
            background-color: red;
            /*padding-top: 100px;*/  /*方法1：要减去多出的相应高宽 */
            /*border: 1px solid #000000;*/  /*方法2*/
            overflow: hidden;    /*方法3*/
        }
        .box2 {
            width: 100px;
            height: 50px;
            background-color: blue;
            margin-top: 100px;
            margin-left: 75px;
        }

    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

margin塌陷现象的更多相关文章

  1. margin 塌陷现象 与 注意事项

    1.在标准文档流中,块级标签之间竖直方向的margin会以大的为准,这就是margin的塌陷现象. 但是,脱标之后就不会出现margin的塌陷现象. 2.margin:0 auto;  会让盒子水平居 ...

  2. margin塌陷现象（即在内层设置margin-top无效的解决办法）

    有两个有嵌套关系的div,如果外层div的父元素的padding值为0,那么内层子div的margin-top或margin-bottom的值会转移给外层的父div,即magrin塌陷现象. 解决办法 ...

  3. "margin塌陷现象"div盒子嵌套盒子外边距合并现象

    问题描述:原型大概是“一个div嵌套了两个 div,给main设定了background="pink" ,header1设定background=“red” .header2 设定 ...

  4. margin的两个有趣现象：margin合并和margin塌陷

    margin合并 当两个元素在垂直方向并列,分别设置margin值时会发生一个margin合并的现象 举个例子,有两个div,垂直并列,box1设置margin-bottom:20px,box2设置m ...

  5. “margin塌陷” 嵌套盒子外边距合并现象

    来源于官方文档对于外边距合并的解释: 注释:只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝对定位之间的外边距不会合并. 出现外边距塌陷的三种情况: 1.相邻兄弟元素之间 若两者 ...

  6. css中常见margin塌陷问题之解决办法

    塌陷问题 当两个盒子在垂直方向上设置margin值时,会出现一个有趣的塌陷现象. ①垂直并列 首先设置两个DIV,并为其制定宽高 1 /*HTML部分*/ 2 <body> 3 <d ...

  7. Unit 6.标准文档流,浮动,清除浮动以及margin塌陷问题

    一. 什么是标准文档流 文本流其实就是文档的读取和输出顺序,也就是我们通常看到的由左到右.由上而下的读取和输出形式,在网页中每个元素都是按照这个顺序进行排序和显示的,而float和position两个 ...

  8. margin塌陷

    我工作基本上就是写业务逻辑,不怎么写页面就一直觉得页面布局特高深.有天我同事问我,知道margin塌陷是什么东西不,我说我不知道(反正我也不用,管他呢),他说面试的时候问的(...那这必须得去看啊). ...

  9. 12-[CSS]-margin塌陷，margin 0 auto,善用父级的padding

    1.margin塌陷 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

随机推荐

  1. PorterDuffXfermode的用法

    1.下面的Xfermode子类可以改变这种行为: AvoidXfermode  指定了一个颜色和容差,强制Paint避免在它上面绘图(或者只在它上面绘图). PixelXorXfermode  当覆盖 ...

  2. 项目 XXX 的 NuGet 程序包还原失败:找不到“xxx”版本的程序包“xxx”

    项目 XXX 的 NuGet 程序包还原失败:找不到“xxx”版本的程序包“xxx” 编译新下载的代码出错 修改包管理器的源为 http://www.nuget.org/api/v2/ .重试后成功 ...

  3. nexus

    下载地址:http://pan.baidu.com/s/1nvwIoa9   (Jfrog/Nexus) maven 仓库: http://mvnrepository.com/ 用户名密码分别是:ad ...

  4. Lua学习笔记一

    学习了有一周多了.之前一直不想献丑,但还是记录下这个过程. 第1章  开发软件搭建 1. ubuntu 下lua安装 sudo apt-get install lua5.1 2.win下的环境搭建. ...

  5. JavaScript基本操作

    一.如何编写? 1.JavaScript代码存在形式 <!-- 方式一 --> <script type="text/javascript" src=" ...

  6. jffs2和yaffs2文件系统制作工具的编译与使用

    一 . 先准备文件 mtd-utils-1.4.5.tar.bz2 ftp://ftp.infradead.org/pub/mtd-utils/ zlib-1.2.5.tar.bz2 http://z ...

  7. logstash读取redis数据

    类型设置: logstash中的redis插件,指定了三种方式来读取redis队列中的信息. list=>BLPOP                                    (相当 ...

  8. （四）SQL入门 数据库的操作与事务管理

    数据库的操作,有三个最基本的语句,insert插入,update修改,delete删除. 不同的数据库厂商的实现可能不同,所以就不说具体的语法怎么写的了.说语法也没有意义,到处都可以复制粘贴,记得听某 ...

  9. YbSoftwareFactory 代码生成插件【十九】：实体类配合数据库表字段进行属性扩展的小技巧

    实体类通常需要和数据库表进行了ORM映射,当你需要添加新的属性时,往往同时也需要在数据库中添加相应的字段并配置好映射关系,同时可能还需对数据访问组件进行重新编译和部署才能有效.而当你开始设计一个通用数 ...

  10. ECshop后台角色权限的添加和分配

    1.在权限文件中配置 2.在需要加权限的文件中加入权限. 例如:d:\ecshop\admin\user_account.php 3.在数据库表 ecs_admin_action中配置 4.会员权限 ...