上次问答未解决的疑惑继续追问
来源：3-4 编程练习
清泓4172801
2019-05-15 15:05:01
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div-float{
width: 500px;
height:auto;
/* background-color: #000000;*/
/*方法二在相应的盒子里添加标签,zoom为了兼容ie老版本的浏览器*/
/*overflow: hidden;
zoom: 1;*/
border: 2px solid red;
}
.li1,.li2{
width: 100px;
height: 100px;
background-color: #FF0000;
float: left;
margin: 3px;
}
/*方法一*/
/*.clear-float{
clear: both;
}*/
/*方法三，在盒子里添加标签,使用css3的伪元素*/
.clear-float:after{
content: ".";
height: 0;
display: block;
visibility: hidden;
clear: both;
zoom: 1;
}
/*div-photo区*/
*{
padding: 0;
margin: 0;
}
.div-photo{
width:939px;
height: auto;
border: 1px dashed deeppink;
overflow: hidden;
zoom: 1;
}
.div1,.div2,.div3,.div4,.div5,.div6{
width: 300px;
height: auto;
margin: 4px;
border: dotted darkgray;
float:left;
/*clear: both;*/
text-align: center;
}
</style>
</head>
<body>
<div class="div-float clear-float">
<div class="li1"></div>
<div class="li2"></div>
<!--方法一-->
<!--<div class="clear-float"></div>-->
</div>
<!-- 此处写代码 -->
<div class="div-photo">
<div class="div1">
<a href="#"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"></a><br />
<span>欢迎来到慕课网学习新知识</span>
</div>
<div class="div2">
<a href="#"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"></a><br />
<span>欢迎来到慕课网学习新知识</span>
</div>
<div class="div3">
<a href="#"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"></a><br />
<span>欢迎来到慕课网学习新知识</span>
</div>
<div class="div4">
<a href="#"><img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"></a><br />
<span>欢迎来到慕课网学习新知识</span>
</div>
<div class="div5">
<a href="#"><img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"></a><br />
<span>欢迎来到慕课网学习新知识</span>
</div>
<div class="div6">
<a href="#"><img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"></a><br />
<span>欢迎来到慕课网学习新知识</span>
</div>
</div>
</body>
</html>
存在的问题：外框宽度等于div300px+border6px+margin8px*3=942px,但是我写成939px的宽也是没问题的，是不是把大边框的border也要算进去？大边框border也只有1px,也就是左右边框加起来也只有2px,但我939px,和算出来的值实际上少了3px
1回答
-
同学你好！
不是把大盒子的边框算进去哦，是小盒子的，div1,div2,din3...等的边框
同学这里只设置了边框样式和颜色，没有设置边框宽度，浏览器默认边框宽度为3px,所以小盒子左右一共是6px(同学是可以设置边框宽度的，设置之后浏览器就不会自己默认了)
这里宽度设置为939px是不可以的，会成两列排列
同学可以试着理解一下
如果帮助到了你 欢迎采纳 祝学习愉快~
0
相似问题