3-4编程练习
来源：3-4 编程练习
慕码人5382834
2020-09-13 10:52:55
<!DOCTYPE html>
<html>
<head>
<style>
*{margin:0;padding:0;}
.container{border:1px dashed;
overflow:hidden;zoom:1;
width:810px;}
.one{float:left;
width:240px;
border:1px #ccc solid;
margin:20px 10px 10px 20px;
}
.two{float:left;
width:240px;
border:1px #ccc solid;
margin:20px 10px 10px 10px;
}
.three{float:left;
width:240px;
border:1px #ccc solid;
margin:20px 20px 10px 10px;
}
.four{float:left;
width:240px;
border:1px #ccc solid;
margin:10px 10px 20px 20px;
}
.five{float:left;
width:240px;
border:1px #ccc solid;
margin:10px 10px 20px 10px;
}
.six{float:left;
width:240px;
border:1px #ccc solid;
margin:10px 20px 20px 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="one">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<span>欢迎来到慕课网学习知识！</span>
</div>
<div class="two">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<span>欢迎来到慕课网学习知识！</span>
</div>
<div class="three">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<span>欢迎来到慕课网学习知识！</span>
</div>
<div class="four">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<span>欢迎来到慕课网学习知识！</span>
</div>
<div class="five">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<span>欢迎来到慕课网学习知识！</span>
</div>
<div class="six">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<span>欢迎来到慕课网学习知识！</span>
</div>
</div>
</body>
</html>
请问我的代码有错吗？
请问
1）width=810的值是怎么计算出来的呢？
内边距+边框+图片宽度得出来的吗？我算出来的值是：808，始终少了2？？
2）请问图片的宽度要怎么设置呢？有什么规律吗？
我之前用250px，但是图片和border之间会有空隙。
谢谢~
1回答
-
同学你好，对于你的问题解答如下：
如下所示，最后一个小盒子与大盒子之间存在间隙，导致图片与图片之间的间距和图片与边框之间的间距不相等。
建议：调整大盒子的宽度，让其等于子元素实际占据页面的宽度之和
由第一条可知，大盒子的宽度应该是806px， 三个小盒子实际占据的宽度之和。每一个小盒子实际占据的宽度为：width +border＋margin + padding
图片宽度可以任意设置，例如这里可以设置240px，也可以设置250px，同学根据实际情况灵活调整即可。
同学设置250是针对div元素设置的，并没有给图片设置宽度，所以图片会以自身的宽高显示，由于这个练习题是用的图片本来的宽度就是240，所以无法填充满div元素，导致出现空隙。
当给div设置宽度为250px的时候，调整图片的宽度也是250px就可以了。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题