bug:margin塌陷

最新推荐文章于 2022-02-20 21:31:26 发布

weixin_30639719

最新推荐文章于 2022-02-20 21:31:26 发布

阅读量77

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/liubeimeng/p/10642009.html

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>

转载于:https://www.cnblogs.com/liubeimeng/p/10642009.html