css布局2-14编程练习
来源：2-14 编程练习
soso_crazy
2018-08-02 21:34:22
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{padding:0;margin:0;}
.box{
width:1000px;
height:700px;
margin:0 auto;
}
.hight img{float:left;
margin:20px 50px;
padding:10px;}
.low img{float:left;
margin:30px 50px;}
.hight{width:1000px;
height:300px;
background:#87CEEB;
margin:0 auto;}
.low{background:#FFB6C1;
width:1000px;
height:120px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="box">
<div class="hight">
<img src="http://climg.mukewang.com/58c0f808000129a303600215.jpg"/>
<img src="http://climg.mukewang.com/58c0f819000198a703600214.jpg"/>
</div>
<div class="low">
<img src="http://climg.mukewang.com/58c0f81d0001fe4402000060.jpg"/>
<img src="http://climg.mukewang.com/58c0f8220001dfce02000060.jpg"/>
<img src="http://climg.mukewang.com/58c0f8780001c74602000060.jpg"/>
</div>
</div>
</body>
</html>
盒子的width和height值、hight的width和height的值、low的width和height的值应该如何定？有规定吗？
图片如何实现垂直水平居中最好？
为什么不加img{float：left}仍然能实现一排排列，是因为img标签是行内元素吗？那就不需要加浮动吧？
4.根据题目的4点要求，以上代码要做哪些改动？
2回答
-
樱桃小胖子
2018-08-05
1、hight img的margin值和low img的margin值都是根据盒子模型计算出来的，盒子=content(内容）+margin+padding+border;
2、margin是设置盒子与盒子之间的距离的，padding是这是盒子的内填充的，如下图
希望可以帮到你！
0 -
妮可妮可妮_
2018-08-03
我们课程中的编程练习根据任务需求实现效果就可以了~本题中没有规定宽高值哦!
图片实现垂直水平居中效果的方法不唯一,需要根据项目的需求而定,
img属于行内替换元素,当空间足够时默认是会在一排显示的.
图片没有居中显示,使用填充值需要仔细去计算,下图代码仅供参考:
整个盒子没有在页面中垂直居中显示,建议将子元素设置为绝对定位,top:50%;margin-top:负一半的高度,就可以垂直居中显示了,水平居中的实现方法也是一样的,可参考下图所示代码:
如果可以解决你的疑惑,记得采纳哦~
祝学习愉快!
0h018-08-04
相似问题