老师您好，想请教您几个问题!!!非常感谢，

来源：4-11 编程练习

霸气小肆毛

2020-01-26 20:33:34

问题1：为防止父元素崩塌，我是通过不断尝试设置合适的最外层div的height来解决的，这个方法感觉太笨了，老师，请问其他方法应该怎么做啊？

问题2：练习中一共6个小模块，从左到右，从上至下，依次记为1~6,我是通过调整1、2、4、5的margin-right来调整元素间距的为30px，所以整体内容的width应该:3*图片宽度（240px）+2*相邻图片间距（30px）=780px，这样算出来的width对吗？另外但是我将width设为780px之后却产生了如下图的效果（3行2列），只有将width设置稍微大一些（790px）才是2行3列。老师，这一部分差在哪里呢？

问题3：想问下老师应该怎么区分下面图中线到底是以下哪一个？

1）文本的轮廓、2）第一个小模块的轮廓、3）文本的border、4）第一个小模块的border

我是选择的文本的border进行设置的，也不知道对不对。

问题4：首先感谢老师能认真的看到这里，感谢老师认真的解答^.^，还有一个问题是代码还有哪些不妥或者需要优化的地方吗？（运行图如下：代码如下：）

如果老师能发一份参考答案我学习下，就非常感谢了。
运行结果图：

练习代码如下：
<!DOCTYPE html>
<html>
<head>

<style type="text/css">
#div0{

border:1px dashed rgb(208,208,208);

padding:30px;

width:790px;

height:370px;

position:absolute;

top:50px;

left:50%;

/*-(790/2+30)*/

margin-left:-425px;

}
p{
padding-left:10px;
margin-top:1px;
margin-bottom:5px;
}
#div0 div{
float:left;
border:1px solid #dedede;
}
#div1,#div2,#div4,#div5{
margin-right:30px;
}
#div4,#div5,#div6{
margin-top:25px;
}
</style>
</head>
<body>

<div id="div0">
<div id="div1">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<p>欢迎来到慕课网学知识1</p>
</div>
<div id="div2">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<p>欢迎来到慕课网学知识2</p>
</div>
<div id="div3">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
<p>欢迎来到慕课网学知识3</p>
</div>
<div id="div4">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<p>欢迎来到慕课网学知识4</p>
</div>
<div id="div5">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<p>欢迎来到慕课网学知识5</p>
</div>
<div id="div6">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
<p>欢迎来到慕课网学知识6</p>
</div>
</div>
</body>
</html>