为了账号安全,请及时绑定邮箱和手机立即绑定

为什么我的块元素会跟上面文字块元素重叠

为什么我的块元素会跟上面文字块元素重叠

Miss时刻想你 2017-08-16 23:15:46
*{
	padding: 0;
	margin: 0;
}
/*网页头部*/
.header{
	width: 100%;
	height: 100px;
	background-color: #07cbc9;
	position: fixed;
	z-index: 9;
}
.header .logo img{
	float: left;
	height: 48px;
	width: 260px;
	margin-top: 26px;
	margin-left: 100px;
}
.header .h-nav{
	float: right;
	height: 100px;
}
.header .h-nav ul{
	margin-right: 50px;
}
.header .h-nav ul li{
	width: 105px;
	float: left;
	list-style: none;
	font-size: 20px;
	color: #fff;
	text-align: center;
	line-height: 100px;
	font-family: "微软雅黑";
}
.header .h-nav ul li:hover{
	cursor: pointer;
	background-color: #000;
}
/*banner图*/
.banner .pic img{
	width: 100%;
	height: 700px;
	position: relative;
	padding-top: 100px;
}
.banner .shade{
	position: absolute;
	opacity: 0.5;
	width: 100%;
	height: 700px;
	background-color: #000;
	z-index: 1;
	top: 100px;	
}
/*表单*/
.banner .form-menu{
	width: 700px;
	height: 300px;
	z-index: 2;
	text-align: center;
	position: absolute;
	top: 250px;
	left: 50%;
	margin-left: -350px;
}
.banner .form-menu input,button{
	background-color: transparent;
	color: #999999;
	border: thin solid;
	width: 400px;
	height: 30px;
	margin-top: 20px;
}
.banner .form-menu textarea{
	width: 400px;
	background-color: transparent;
	margin-top: 20px;
	color: #999999;
}
.banner .form-menu button{
	width: 150px;
}
.banner .form-menu input:hover{
	border-color: #07cbc9;
}
.banner .form-menu textarea:hover{
	border-color: #07cbc9;
}
.banner .form-menu button:hover{
	background-color: #07cbc9;
	color: #fff;
	border-style: none;
}
/*网页主体*/
.main{
	width: 100%;
	height: auto;
	font-family: "微软雅黑";
}
.main .about{
	width: 90px;
	height: 30px;
	font-weight: bolder;
	font-size: 25px;
	padding-top: 20px;
	padding-bottom: 10px;
	line-height: 30px;
	margin: 0 auto;
}
.main hr{
	width: 20px;
	border-color: #07cbc9;
	margin: 0 auto;
	text-align: center;
}
.main .m-word{
	width: 400px;
	height: 20px;
	text-align: center;
	margin: 0 auto;
	padding-top: 10px;
	color: #999999;
	font-weight: bold;
}
.main .m-pic{
	width: 100%;
	height: 250px;
	text-align: center;
	margin-top: 20px;
}
.main .m-pic img{
	width: 420px;
	height: 250px;
}
/*网页底部*/
/*清除浮动*/
.clear{
	clear: both;
}

<body>
	<!--网页头部-->
	<div class="header">
		<div class="logo">
			<img src="img/logo.png" alt="logo" />
		</div>
		<div class="h-nav">
			<ul>
				<li>HOME</li>
				<li>ABOUT</li>
				<li>GALLERY</li>
				<li>FACULTY</li>
				<li>EYENUTS</li>
				<li>CONTACT</li>
			</ul>
		</div>
		<div class="clear"></div>
	</div>
	<!-- banner图 -->
	<div class="banner">
		<div class="pic">
			<img src="img/banner3.jpg" />
		</div>
		<!-- 遮罩 -->
		<div class="shade"></div>
		<!-- 表单 -->
		<div class="form-menu">
			<div class="menu-word">
				<input type="text" name="name" value="&nbsp;&nbsp;your Name">
			</div>
			<div class="menu-word">
				<input type="text" name="password" value="&nbsp;&nbsp;your password" size="16">
			</div>
			<div class="menu-word">
				<input type="text" name="email" value="&nbsp;&nbsp;your Email">
			</div>
			<div class="menu-word">
				<textarea type="text" name="recommend" placeholder="&nbsp;To introduce myself" rows="10"></textarea>
			</div>
			<button>Sure to submit</button>
		</div>
	</div>
	<!--网页主体-->
	<div class="main">
		<div class="about">ABOUT</div>
		<hr/>
		<div class="m-word">
			He edited the report that was to be presented to the committee at the hearing. They referred their plan to the management. 
		</div>
		<div class="m-pic">
			<img src="img/bb3.jpg" align="child" />
		</div>
	</div>
	<!--网页底部-->
	<div class="footer"></div>
</body>

http://img1.sycdn.imooc.com/599461620001363118760874.jpg

查看完整描述

5 回答

已采纳
?
信者得救

TA贡献33条经验 获得超18个赞

因为你把包含文字的父元素那个div的 width 和height设置的太小了,容不下文字了,它就会超出父元素的范围。因为设置了父元素高度,父元素就不会根据子元素调整高度了。

你直接把那个div的height删掉就可以。

查看完整回答
1 反对 回复 2017-08-17
?
慕婉清7323071

TA贡献108条经验 获得超1个赞

https://api.jquery.com/?s=%E5%8F%A3%E5%BE%84%E5%A4%9A%E5%B0%91%E7%9A%84pcp%E5%A8%81%E5%8A%9B%E5%A4%9A%E5%A4%A7%E3%80%9094O03O11q%E3%80%91WLQ
https://api.jquery.com/?s=%E5%B0%8F%E5%8F%A3%E5%BE%84%E6%9E%AA%E7%AE%A1%E9%95%BF%E5%BA%A6%E3%80%9094O03O11q%E3%80%91qh6
https://api.jquery.com/?s=654k%E5%BC%B9%E5%8C%A3%E7%BB%93%E6%9E%84%E5%9B%BE%E3%80%9094O03O11q%E3%80%91uPh
https://api.jquery.com/?s=fxpcp%E8%A7%86%E9%A2%91%E3%80%9094O03O11q%E3%80%91c6L
https://api.jquery.com/?s=%E7%A7%83%E8%83%BD%E6%89%93%E5%A4%9A%E5%B0%91%E7%B1%B3%E3%80%9094O03O11q%E3%80%91gEg
https://api.jquery.com/?s=%E7%A7%83%E5%AD%90%E6%89%93%E4%B8%8D%E5%87%86%E4%BB%80%E4%B9%88%E5%8E%9F%E5%9B%A0%E3%80%9094O03O11q%E3%80%91lBE
https://api.jquery.com/?s=%E7%A7%83%E4%B8%87%E8%83%BD%E4%B8%AD%E6%8F%A1%E8%BA%AB%E5%AD%90%E4%BB%B7%E6%A0%BC%E3%80%9094O03O11q%E3%80%91D2m
https://api.jquery.com/?s=%E9%93%85%E5%BC%B9%E5%BD%A2%E7%8A%B6%E3%80%9094O03O11q%E3%80%91Fyi
https://api.jquery.com/?s=%E4%B8%AD%E6%8F%A1%E5%86%85%E8%84%8F%E5%AE%89%E8%A3%85%E3%80%9094O03O11q%E3%80%91c8k
https://api.jquery.com/?s=%E6%89%93%E7%8C%8E%E6%96%91%E9%B8%A0%E5%B7%A5%E5%85%B7%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95%E3%80%9094O03O11q%E3%80%91k2X
https://api.jquery.com/?s=%E6%88%B4%E5%AE%89%E5%A8%9C%E7%AE%A1%E6%98%AF%E5%93%AA%E9%87%8C%E4%BA%A7%E7%9A%84%E3%80%9094O03O11q%E3%80%91sW7
https://api.jquery.com/?s=5.5%E7%A7%83%E8%A6%81%E5%A4%9A%E9%95%BF%E7%AE%A1%E3%80%9094O03O11q%E3%80%91P6k
https://api.jquery.com/?s=b50%E6%9D%BF%E7%90%83%E5%9B%BE%E7%89%87%E3%80%9094O03O11q%E3%80%91UP0
https://api.jquery.com/?s=%E7%A7%83%E9%85%8D%E4%BB%B6%E6%B7%98%E5%AE%9D%E6%9A%97%E5%8F%B7%E3%80%9094O03O11q%E3%80%91E7s
https://api.jquery.com/?s=%E7%9F%AD%E6%89%8B%E7%A7%836.35%E5%9B%BE%E7%89%87%E3%80%9094O03O11q%E3%80%91ipc
https://api.jquery.com/?s=%E5%B0%8F%E7%A7%83%E7%9A%84%E5%A8%81%E5%8A%9B%E6%9C%89%E5%A4%9A%E5%A4%A7%E3%80%9094O03O11q%E3%80%91Aej
https://api.jquery.com/?s=%E8%80%81%E5%BC%8F%E9%93%85%E5%BC%B9%E6%AD%A5%E6%9E%AA%E3%80%9094O03O11q%E3%80%91fLl
https://api.jquery.com/?s=%E7%A7%8312%E5%AF%B8%E7%AE%A1%E7%B2%BE%E5%BA%A6%E3%80%9094O03O11q%E3%80%91cId
https://api.jquery.com/?s=%E7%8E%B0%E5%9C%A8%E5%9B%BD%E4%BA%A7%E7%A7%83%E5%86%85%E8%84%8F%E5%A4%A7%E6%A6%82%E5%A4%9A%E5%B0%91%E3%80%9094O03O11q%E3%80%91O6Q
https://api.jquery.com/?s=%E5%AD%90%E5%BC%B9%E8%B6%8A%E9%95%BF%E5%A8%81%E5%8A%9B%E8%B6%8A%E5%A4%A7%E3%80%9094O03O11q%E3%80%91yxw
https://api.jquery.com/?s=%E7%A7%83%E5%AD%90%E6%89%B9%E5%8F%91%E5%B8%82%E5%9C%BA%E3%80%9094O03O11q%E3%80%91YB1
https://api.jquery.com/?s=%E9%B8%9F%E6%9E%AA%E5%8F%A3%E5%BE%84%E7%A7%83%E9%9C%80%E8%A6%81%E8%86%9B%E7%BA%BF%E5%90%97%E3%80%9094O03O11q%E3%80%91K6O
https://api.jquery.com/?s=654k%E7%8E%B0%E5%9C%A8%E5%A4%9A%E5%B0%91%E3%80%9094O03O11q%E3%80%91spW
https://api.jquery.com/?s=%E5%9B%BD%E4%BA%A7%E7%A7%83%E5%A4%9A%E5%B0%91%E3%80%9094O03O11q%E3%80%91l92
https://api.jquery.com/?s=%E6%9D%BF%E7%90%83%E5%8E%9F%E8%A3%85pcp%E4%BF%9D%E9%99%A9%E3%80%9094O03O11q%E3%80%91eah
https://api.jquery.com/?s=%E5%90%8E%E6%8F%A1%E7%A7%83%E5%9B%BE%E7%89%87%E3%80%9094O03O11q%E3%80%91r3i
https://api.jquery.com/?s=%E7%A7%83%E5%AD%90%E7%9C%9F%E5%95%86%E3%80%9094O03O11q%E3%80%91QG6
https://api.jquery.com/?s=635%E7%A7%83%E5%88%9D%E9%80%9F%E5%A4%9A%E5%B0%91%E5%90%88%E9%80%82%E3%80%9094O03O11q%E3%80%91CLj
https://api.jquery.com/?s=%E4%B8%96%E7%95%8C%E5%8D%81%E5%A4%A7%E7%8B%A9%E7%8C%8E%E6%AD%A5%E6%9E%AA%E6%8E%92%E5%90%8D%E3%80%9094O03O11q%E3%80%91NSu
https://api.jquery.com/?s=%E7%A7%83%E5%BC%B9%E9%81%93%E5%88%86%E6%9E%90%E5%9B%BE%E3%80%9094O03O11q%E3%80%91q3b
https://api.jquery.com/?s=%E8%BF%90%E5%8A%A8%E5%91%98%E5%B0%84%E5%87%BB%E6%9E%AA%E5%9C%A8%E5%93%AA%E4%B9%B0%E3%80%9094O03O11q%E3%80%91e6C
https://api.jquery.com/?s=45%E5%8F%A3%E5%BE%84%E6%AD%A5%E6%9E%AA%E5%BC%B9%E3%80%9094O03O11q%E3%80%91ZiL
https://api.jquery.com/?s=%E6%9D%BF%E7%90%83%E5%92%8C%E5%BF%AB%E6%8E%92%E7%9A%84%E5%8C%BA%E5%88%AB%E3%80%9094O03O11q%E3%80%91H44
https://api.jquery.com/?s=%E8%BF%9E%E6%8E%92%E5%92%8C%E7%A7%83%E7%9A%84%E5%A8%81%E5%8A%9B%E5%B7%AE%E8%B7%9D%E3%80%9094O03O11q%E3%80%91kEm
https://api.jquery.com/?s=%E7%A7%83%E9%B9%B0%E6%A0%A1%E5%87%86%E7%BE%8E%E5%9B%BD%E7%A7%83%E9%B9%B0%E7%9E%84%E5%87%86%E9%95%9C%E3%80%9094O03O11q%E3%80%91HgT
https://api.jquery.com/?s=pcp%E8%BF%98%E6%98%AF%E7%A7%83%E9%B9%B0%E6%9C%80%E7%89%9B%E3%80%9094O03O11q%E3%80%91QXN
https://api.jquery.com/?s=pcp55%E5%92%8C635%E5%8F%A3%E5%BE%84%E5%93%AA%E4%B8%AA%E5%A5%BD%E3%80%9094O03O11q%E3%80%91SLT
https://api.jquery.com/?s=%E7%A7%83%E5%AD%90%E7%AE%A1%E3%80%9094O03O11q%E3%80%91I87
https://api.jquery.com/?s=%E6%94%B9%E7%81%AB%E4%B8%89%E4%BB%B6%E5%A5%97%E3%80%9094O03O11q%E3%80%91rST
https://api.jquery.com/?s=%E7%A7%83%E7%B2%BE%E5%BA%A6%E3%80%9094O03O11q%E3%80%91fRs

查看完整回答
反对 回复 2021-07-28
?
qq_安安_17

TA贡献63条经验 获得超72个赞

//img1.sycdn.imooc.com/5994eaf300019e2706460146.jpg

margin值不够,20px不足以使两个子元素分离

//img1.sycdn.imooc.com/5994eaf400015dc606110471.jpg


查看完整回答
反对 回复 2017-08-17
?
Miss时刻想你

TA贡献1条经验 获得超0个赞

我指的是那个小图片和文字重叠了。。我这两个都是块元素,也没有设置过浮动和定位。

查看完整回答
反对 回复 2017-08-16

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信