垂直外边距合并问题以及处理对象的问题

最新推荐文章于 2024-10-04 22:03:04 发布

壹万年太久

最新推荐文章于 2024-10-04 22:03:04 发布

阅读量117

点赞数

文章标签： css js

本文链接：https://blog.csdn.net/ji4396/article/details/103778533

版权

首先先来写个样式我们来看看效果

 <html>
    <head>
	<meta charset="UTF-8">
	<title></title>
</head>
<style type="text/css">
	*{
		margin: 0px;
		padding: 0px;
	}
	#app{
		height: 600px;
		background: pink;

	
	}
	#box{
		height: 200px;
		background: yellow;
		margin-top: 50px;
	}
	
</style>
<body>
	<div id="app">
		<div id="box">
			
		</div>
	</div>
</body>

在这里插入图片描述
按理说我们其实想要实现的效果并不想让最外面的盒子box也有向上的margin值，之所以出现这种情况，根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。（注：这个第一个子元素我发现是需要设置margin-top和height的，没有的话他会找到有这两个属性的第一个子元素）

解决方案：
几种解决办法：

1：父容器：border：1px solid;（不能是0px）

2：父容器：overflow: hidden;（或auto）

3：父容器：padding：1px；（不能是0或auto，其他的任意数值都可以）

4：父容器或子容器： float：left；（不能是auto）

5：父容器或子容器：position：absolute；

6：子容器：display：inline-block;(或是inline-table)

7：相邻元素：任意一个添加float：left（不能是auto）

附带个处理对象，把两对象合并的方法

   var obj1={
		id:1,
		name:'yang',
		age:12,
		sex:'boy'
	}
	var obj2={
		id:1,
		car:'BMW',
		girlFriend:'DLRB',
		money:'undefind'
	}
	
	let obj=new Object();
	for (i in obj1) {
		for(j in obj2){
			if(i==j){
				obj[i]=obj1[i];
			}else{
				obj[i]=obj1[i];
				obj[j]=obj2[j]
			}
		}
	}
	
	console.log(obj)