margin塌陷：两个嵌套的div，内部div的margin-top失效，内部对于外部的div并没有产生一个margin值，而是外部的div相对于上面的div产生了一个margin值。

弥补方法：

　　1.在父级div添加border-top:1px solid #rrggbb;

　　思考：采用这种解决方案，貌似会被产品经理揍死~~~，平白无故多了一像素，不能忍。

　　2.BFC：block format context 块级格式化上下文，创建了 BFC 的元素就是一个独立的盒子,不过只有 Block-level box 可以参与创建 BFC, 它规定了内部的 Block-level Box 如何布局,并且与这个独立盒子里的布局不受外部影响,当然它也不会影响到外面的元素。
        如何触发一个盒子的bfc？
        position:absolute;
        display:inline-block;
        float:left/right;
        overflow:hidden;溢出盒子的部分要隐藏展示

　　思考：使用上述方法弥补margin塌陷，同时也会伴随其他问题，需要选择对最好一个方案使用。

DEMO:

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style>

		*{margin: 0;padding: 0;}

		.wrapper{

			margin-left: 100px;

			margin-top: 100px;

			width: 100px;

			height: 100px;

			background-color: black;

			/*border-top:1px solid #ff0000;*/

			/*改变大盒子的渲染规则*/

			/*overflow: hidden;*/

			/*display: inline-block;

			position: absolute;*/

		}

		.content{

			margin-left: 50px;

			margin-top: 50px;/*margin塌陷*/

			width: 50px;

			height: 50px;

			background-color: green;

		}

	</style>

</head>

<body>

	<div class="wrapper">

		<div class="content"></div>

	</div>

	<script>

		/*

		margin塌陷:

		两个嵌套的div，内部div的margin-top失效

		内部对于外部的div并没有产生一个margin值，而是外部的div相对于上面的div产生了一个margin值。

		弥补方法：1.在父级div添加border-top:1px solid #rrggbb;

		思考：采用这种解决方案，貌似会被产品经理揍死~~~，平白无故多了一像素，不能忍。

		2.

		BFC：block format context 块级格式化上下文

		如何触发一个盒子的bfc

		position:absolute;

		display:inline-block;

		float:left/right;

		overflow:hidden;溢出盒子的部分要隐藏展示

		*/

	</script>

</body>

</html>

bug:margin塌陷的更多相关文章

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

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

  2. 解决margin塌陷和margin合并

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. margin塌陷现象

    如果两个盒子是包含关系,如果让子盒子在父盒子之内向下平移100px:(margin塌陷现象)解决方案: padding , border , overflow <!DOCTYPE html> ...

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

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

  5. margin塌陷与margin合并（margin），清除浮动

    **1.margin塌陷**问题:垂直方向的父子关系的盒子使用不当会产生margin塌陷.给子级设置margin-top时,他不会相对父级一起动,只有他的margin超过父级的margin时,才会生效 ...

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

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

  7. 学习笔记------------解决margin塌陷

    首先来解释一下什么是marg塌陷? 父子嵌套元素垂直方向的margin,父子元素是结合在一起的,他们两个会取其中最大的值 正常情况下应该是父级元素相对于浏览器定位,而子级元素相对于父级元素定位 但是m ...

  8. margin塌陷与BFC总结

    只给出关键点,具体效果不做太多示范,真正的东西只有自己试了才能记住 BFC BFC触发: 1.position:absolute/fixed 2.float:left/right 3.display: ...

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

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

随机推荐

  1. [BZOJ1492][NOI2007]cash-[cdq分治]

    Description 传送门 Solution 首先,最优情况一定是某一天把所有金券卖出或买入是最优的. 在金券一定的情况下,分散卖一定没有统一在最优的那天卖更优. 然后,我们假定在某一天卖,则在该 ...

  2. 优步UBER司机全国各地奖励政策汇总 (4月11日-4月17日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  3. centos7下python3与python2共存并且开启py3虚拟环境

    因为下载视频需要用到python3环境,今天在我的win上安装下载工具死活安装不上去,在大盘鸡上一下就安装成功了...可能在win上不兼容吧...无奈只能在大盘鸡上进行折腾了,顺便几个笔记 由于大盘鸡 ...

  4. XAF-物料管理信息工作日志

    前段时间已经开始了第一阶段验收了,客户方并未把重点放在业务流程上面,一直在调整一些界面问题.有点小纠结. 今天要调一下菜单位置. 没修改时,是这样的: 到了列表界面,会多一个全文检索出来. 后来,客户 ...

  5. commons fileupload上传报错

    这个问题困扰我好久了一直没有找到解决方法,先记录下来. 生产环境(简称A)上老是出错,而测试环境(简称B)一切正常. 我们的框架是JAVA语言编写,基于struts1技术总监自己搭的框架,我在stru ...

  6. 爬虫2.4-scrapy框架-图片分类下载

    目录 scrapy框架-图片下载 1 传统下载方法: 2 scrapy框架的下载方法 3 分类下载完整代码 scrapy框架-图片下载 python小知识: map函数:将一个可迭代对象的每个值,依次 ...

  7. 【ANSIBLE】ansible控制windows插件安装及运行error与解决方法

    一. 问:因pip版本问题无法安装kerberos 答:安装提示需要先安装pip升级包 下载pip9.0.1升级包: https://pypi.python.org/packages/b6/ac/70 ...

  8. JAVA学习笔记--字符串概述

    一.String类 String类代表字符串,是由字符构成的一个序列.创建String对象的方法很简单,有以下几种: 1)用new来创建: String s1 = new String("m ...

  9. DevOps之六 shell以及pipeline 命令部署

    一 使用shell命启动spring boot 项目 1. 使用shell停止当前项目 #!/bin/sh main() { clear pid=`ps -ef|grep xx.jar|grep -v ...

  10. 使用PYTHON解析Wireshark的PCAP文件

    PYTHON首先要安装scapy模块 PY3的安装scapy-python3,使用PIP安装就好了,注意,PY3无法使用pyinstaller打包文件,PY2正常 PY2的安装scapy,比较麻烦 f ...