请问我的代码还能不能再优化一下？
来源：3-4 编程练习
慕9588112
2019-05-08 21:59:48
<!DOCTYPE html>
<html lang="en">
<head>
<style type=text/css>
/* 清除浏览器默认边距 */
*{margin:0;padding:0;}
/* 大容器container的CSS样式 */
.container{
border:1px dashed #ccc;
width:850px;
margin:10px auto;
}
/* 清除浮动影响 */
.clearbox:after{
content:".";
height:0;
display:block;
visibility:hidden;
clear:both;
}
.clearbox{zoom:1;}
/* 模块1-6的CSS样式 */
.box1{
border:1px solid #ccc;
width:240px;
margin:20px;
float:left;
}
.box2{
border:1px solid #ccc;
width:240px;
margin:20px;
float:left;
}
.box3{
border:1px solid #ccc;
width:240px;
margin:20px;
float:left;
}
.box4{
border:1px solid #ccc;
width:240px;
margin:20px;
float:left;
}
.box5{
border:1px solid #ccc;
width:240px;
margin:20px;
float:left;
}
.box6{
border:1px solid #ccc;
width:240px;
margin:20px;
float:left;
}
</style>
</head>
<body>
<!-- 用大容器来包裹六个小模块 -->
<div class="container clearbox">
<!-- 六个小模块 -->
<div class="box1">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="box2">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="box3">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="box4">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"/>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="box5">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"/>
<p>欢迎来到慕课网学习新知识！</p>
</div>
<div class="box6">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"/>
<p>欢迎来到慕课网学习新知识！</p>
</div>
</div>
</body>
</html>还有我想问一下，如何让6个小模块居中在container中显示，
我是在container中是一个一个宽度值试过去的，才发现850px正好可以的。
若是把width设置为1000，或更大的值的话，如何让六个小模块居中显示啊？
写回答
1回答
-
同学你好， 图片距离盒子的左右边框的空白距离不一样哦， 因为每个小盒子实际占据的宽度为：282px = 20 + 1 + 240 + 1 + 20
所以container的宽度应该设置为 846 = 282 * 3
如果把container设置为固定宽度的话， 就需要计算没有盒子的宽度调整margin值了。这里以 1000为例，大盒子的宽度1000 减去三个小盒子占据的宽度 242（width+border） , 小盒子的左右margin值需要均分剩余的空间。45.67= （1000 - 242 * 3）/ 6. 代码示例：
另， 对于重复的样式设置代码， 可以灵活使用CSS选择器将样式写在一起， 简化代码的书写哦~
如果帮助到了你，欢迎采纳！
祝学习愉快~~~
0
相似问题