为什么.line变得那么大!!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Career buildert</title>
<style>
*{margin: 0;padding: 0;font-family: "微软雅黑";}
a{text-decoration: none;}
.nav{width: 100%;height: 80px;background-color: rgb(7,203,201);position: relative;}
.nav img{position: absolute;top:0;bottom: 0;left:20px;margin: auto 0;}
.navv{float: right;position: absolute;top: 0;bottom: 0;margin: auto 0;right: 0px;height:50px;width:50%;}
.navv ul{float: right;height: 50px;}
.navv ul li{list-style-type: none;float:left;font-weight: bold;line-height: 50px;margin: 0 9px;}
.navv ul li a:link{color: #fff;}
.navv ul li a:visited{color: #fff;}
.mess{width: 100%;height: 800px;position: relative;margin-bottom: 40px;}
.mess img{width: 100%;height: 800px;z-index: -1;}
.mess .black{width: 100%;height: 800px;background-color: #000;opacity: 0.5;position: absolute;top: 0;z-index: 1;}
/*chrome的opacity不识别百分比只识别小数点是什么鬼*/
.form{width: 33%;height: 500px;position: absolute;top: 0;bottom: 0;left:0;right:0;margin: auto auto;z-index: 999;}
.input{width: 623.984px;height: 40px;background-color: transparent;border: 2px solid rgb(128,128,128);margin: 20px auto;color:#fff;}
.bigInput{width: 623.984px;height: 170px;background-color: transparent;border: 2px solid rgb(128,128,128);color:#fff;line-height: 40px;margin-bottom: 20px; }
.button{width: 120px;height: 40px;background-color: transparent;border: 2px solid rgb(128,128,128); font-weight: bold;color:#fff;display: block;margin: 0 auto;}
.md{width:100%;height:1500px;position: relative;}
.about{width: 100%;height:500px;position:relative;}
.bo{width:100%;height: 30px;margin: 20px auto;text-align: center;font-size: 1.3em;font-weight: bold;}
.line{width: 30px;height: 2px;background-color: rgb(7,203,201);margin: 0 auto;}
.about div{width: 500px;height: 40px;margin: 0 auto;}
</style>
</head>
<body>
<div class="head">
<div class="nav">
<img src="logo.png">
<div class="navv">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">FACULTY</a></li>
<li><a href="#">EVENTS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>
<div class="mess">
<img src="banner3.jpg">
<div class="black"></div>
<div class="form">
<input type="text" name="yourName" id="yourName" value=" your Name" class="input">
<input type="text" name="yourPhone" id="yourPhone" value=" your Phone" class="input">
<input type="text" name="yourEmail" id="yourEmail" value=" your Email" class="input">
<!-- <input type="text" name="comment" id="comment" value=" Write Your Comment Here" class="bigInput"> -->
<textarea name="comment" id="comment" cols="30" rows="10" class="bigInput"> Write Your Comment Here</textarea>
<input type="submit" value="SEND MESSAGE" class="button">
</div>
</div>
</div>
<div class="md">
<div class="about">
<div class="bo">ABOUT</div>
<div class="line"></div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
</div>
<div class="squa"></div>
<div class="gall"></div>
</div>
<div class="foot"></div>
</body>
</html>麻烦老师看一下,我明明设置了.line的宽和高,结果在浏览器里一打开变得特别大,这是什么情况啊
12
收起
正在回答
1回答
因为优先级的问题：
.about div｛｝优先级高于.line ｛｝优先级，所以 div 使用的是width: 500px; height: 40px;
将.line 的优先级提升，如下：
.about div.line {
width: 30px;
height: 2px;
background-color: rgb(7, 203, 201);
margin: 0 auto;
}希望对你有帮助，动手实践，加油。
相似问题
为什么大写
12
0
6
为什么打印出来有一个undefined
13
0
3
请问老师为什么没有变化？
35
0
3
为什么balance的值没有变化
7
0
5
为什么大型项目 react 更好维护能具个例子吗
50
0
4
登录后可查看更多问答，登录/注册
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星