请问老师：我的背景颜色颠倒、高度不准求指教？

<!DOCTYPE html>

<html>

<head>

/*此处写代码*/

*{padding:0;margin:0;}

.top{width:800px;height:600px;margin:0 auto;

background-color:skyblue;

}

.top1 {width:50%;height:100%;margin:0 auto;

float:left;position:relative;

}

.top1 img{width:80%;height:80%;position:absolute;left:25%;top:25%;margin-top:-20%;margin-left:-14%;

}

.top2 {width:50%;height:100%;margin:0 auto;

float:left;position:relative;

}

.top2 img{width:80%;height:80%;position:absolute;left:25%;top:25%;margin-top:-20%;margin-left:-17%;

}

.bottom{width:800px;height:300px;margin:0 auto;

background-color:pink;

}

.bot1 {width:33%;height:100%;margin:0 auto;float:left;position:relative;}

.bot1 img{width:80%;height:80%;position:absolute;left:25%;top:25%;margin-top:-10%;margin-left:-15%;}

.bot2 {width:33%;height:100%;margin:0 auto;float:left;position:relative;}

.bot2 img{width:80%;height:80%;position:absolute;left:25%;top:25%;margin-top:-10%;margin-left:-15%;}

.bot3 {width:33%;height:100%;margin:0 auto;float:left;position:relative;}

.bot3 img{width:80%;height:80%;position:absolute;left:25%;top:25%;margin-top:-10%;margin-left:-18%;}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

三个月夏天 2019-03-14

源自：CSS网页布局基础 2-14 编程练习

收起

2回答

山河远阔ZZ 2019-03-15 15:50:33

同学你好。

1、图片容器的高度为200px，指的是：最外层的父容器（类名叫bottom的）的宽度设置为200px；高度为60px，是给的img直接的父元素（类名叫.bot1,.bot2.bot3）的div标签。

2、图片直接容器的高度，老师是直接设置的图片本身的高度：img图片的高度是60px；

3、最外层父容器的高度是200px，图片容器的高度是60px，200-60px就还剩140px，把140px平分的出来的就是70px，那么margin-top：70px，就能实现图片的垂直居中效果。

这些是靠计算盒模型的出来哦。

祝学习愉快！

收起回答

山河远阔ZZ 2019-03-15 10:42:10

同学你好，代码中以下几个问题：

1、颜色颠倒：.top区域丢失了一个</div>，参考下图：

2、顶部：图片与图片之间，图片与容器边框之间的间距不一致，如下：

top容器的高度设置小一点，这样图片看起来没有失真的效果，参考下图：
设置间距：给图片容器设置固定的宽高，图片设置宽度为100%，铺满整个容器就可以了，参考下图：
图片容器的宽度是350px，（1000-350*2）/3 =100px，那么margin-left：100px，他们的间距就会一致。
图片容器的高度是215px，（300-215）/2 = 42.5px，那么margin-top：42.5px，上下间距就会一致。

2、bottom区域：图片与图片之间，图片与容器边框之间的距离不一致；

容器的宽高设置改变一下：
图片容器的设置固定的宽高，img标签不用设置任何样式，参考下图：
计算值：图片容器的宽度是200，容器的宽度是1000，（1000-200*3）/4 = 100px；那么margin-left：100px，他们的间距就会一致。
图片容器的高度是60px，容器的高度是200px，（200-60）/2 = 70px，那么margin-top：70px，上下间距就会一致。

自己试一试哦，如果帮助到了你，欢迎采纳。

祝学习愉快！

收起回答

提问者三个月夏天 #1

已建议采纳，还有图片容器的高度问题求教？问：图片容器的高度设置200px,为何直接给图片容器的高度了60px？我的想法：看效果图片得知，宽度大约是高度的2倍；已知图片容器宽度值200px,那么高度值大概在100px上下，我分别试了40px,60px,80px,120px,效果证明60px垂直方向最居中，为何都是等距离分配效果却不同？求教？

2019-03-15 15:32:43