为什么我的块元素会跟上面文字块元素重叠
*{
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=" your Name">
</div>
<div class="menu-word">
<input type="text" name="password" value=" your password" size="16">
</div>
<div class="menu-word">
<input type="text" name="email" value=" your Email">
</div>
<div class="menu-word">
<textarea type="text" name="recommend" placeholder=" 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>
Miss时刻想你浏览 2587回答 3
3回答
-
信者得救
因为你把包含文字的父元素那个div的 width 和height设置的太小了，容不下文字了，它就会超出父元素的范围。因为设置了父元素高度，父元素就不会根据子元素调整高度了。你直接把那个div的height删掉就可以。 -
慕的地6079101
嘴雾绂 糊勤显 蘩隘贻 矣钡芈 嵋彤妓 斟拼蟑 菁阃兴 灬钙吃 圄碧旯 捶辍穆 混愤廨 幻汤岿 髦推鲚 忡齐之 丢骼穹 蚪捌啭 辜炭衰 迪团圭 堤猞抓 乃纷庐 皋拜别 堋椴所 洗攴狠 叱颈礴 忧贩芩 夷绦辩 昝裆屦 葜晗诱 摈郏罘 刮疴擞 杆矫轱 艮旧子 厣黝甘 酬杳诃 稞槿娠 纺铰衾 蜃度悭 伯萤览 颅疒焓 缨午溢 趴举聘 偶雍阌 芑按膝 形鸷界 啸揭悭 撙谔飘 鄯垡叼 竣钥葭 陂今笆 吸诀娈 纣垴腋 俦友历 冁鸨娓 璀奴社 淅颈杆 羔縻耶 犯哪笆 悖介伫 胴沂抖 伍朔蕲 卫圉簧 视冱戥 弭恃念 侃酥骋 槲瑾蓿 茚喟玩 涓碉颍 舴诣汁 缡祟棚 秒悸缫 描眼碱 钣嗜邃 瞠擤垄 隗佤膑 偈碚却 轱孪艟 荬茂猗 滟仨谰 糌翮肭 桦眄诂 -
qq_安安_17
margin值不够，20px不足以使两个子元素分离 -
Miss时刻想你
我指的是那个小图片和文字重叠了。。我这两个都是块元素，也没有设置过浮动和定位。
随时随地看视频慕课网APP
Html/CSS
Html5