4-6案例应用，请问老师，我的代码是哪里错，还有哪里需要改进，谢谢。
来源：4-6 案例应用
qq_慕移动3101913
2019-07-12 11:46:04
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>前端课程排列</title>
<style tepe="text/css">
body,div,p{padding:0;margin:0;font-family:微软雅黑;}
.big{width:220px;
background-color:#f2f4f6;
border:1 #ececec solid;
margin:auto;}
.title{width:100%;
height:150px;
background-color:black;
color:white;
line-height:150px;
text-align:center;
}
.one{
font-size:14px;
width:100%;
background:#F5F5F5;
line-height:20px;
border-bottom:1px solid #DCDCDC;
margin:0 15px;
padding:10px 0;
}
.one2{border-bottom:none;}
span{color:gray;
font-size:13px;}
</style>
</head>
<body>
<div class="big">
<div class="title">
<h3>前端课程排列</h3>
</div>
<div class="one">
<p class="two">HTML+CSS基础课程</p>
<span>456605人在学</span>
</div>
<div class="one">
<p class="two">HTML+CSS基础课程</p>
<span>456605人在学</span>
</div>
<div class="one one2">
<p class="two">HTML+CSS基础课程</p>
<span>456605人在学</span>
</div>
</div>
</body>
</html>
2回答
-
你好同学，盒子设置了宽度100%是相对父容器的而言的。宽度已经是100%的情况下，再给他设置间距，让它往右移动就会超出父容器区域了，参考如下：
一个盒子的实际占用宽度是包含margin的，盒子实际宽度220px加上间距30px已经超出父容器
建议如下调整：
去掉margin, 设置宽度190px，设置左右填充一共为30px，加起来恰好是220px
建议同学在回顾一下盒模型的知识，这样才能更好的对代码进行理解哦。祝学习愉快，望采纳。
0h019-07-12 -
清欢_渡
2019-07-12
回顾下盒子模型的计算方式，修改一下width就行了
0h019-07-12
相似问题