                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

问下这3个代码是怎样实现各自的效果的？另外为什么盒4初始位置默认比盒3右移2px

如图所示，这三个

慕慕1721642

2018-04-24

源自：初识HTML(5)+CSS(3)-升级版 13-9

关注问题我要回答

1192

操作

收起

4 回答

给力哥回答被采纳 +2 积分
2018-04-25

我详细看了下原代码，这章主要讲的的是相对定位，box3是box4的父元素，所以box4是以box3为参照物进行定位的。

第一种情况，相对定位主要以top、bottom、left、right来进行偏移，在不写的情况下，其值默认为auto，浏览器会按照自己的规则对其进行定位；

第二种情况，你加上了top：100%，这就代表box4顶部偏移box3的高度，而box3的高度就是图片的高度，所以会显示紧贴着图片的效果；

第三种情况，bottom:0;，这就代表box4底部偏移0，box4是box3的子元素，box3的底部就是box4的底部，而相对定位的元素是浮在上面的，所以会显示文字在图片上面的效果；

4 回复有任何疑惑可以回复我~

#1

慕慕1721642 提问者

非常感谢！

2018-04-25 回复有任何疑惑可以回复我~

慕移动9181930
2022-03-23

了解了，谢谢。在代码左边数就是行号。

0 回复有任何疑惑可以回复我~

给力哥
2018-04-25

至于为什么box4初始位置默认比box3右移2px，

你没发现最上面有个样式吗?

div{border:2px red solid;}

哈哈哈^_^

2 回复有任何疑惑可以回复我~

#1

慕慕1721642 提问者

嗯，谢谢，我有看到，不过还是困惑box4的初始位置为什么不和box3的初始位置一样呢？（从最左端开始）

2018-04-25 回复有任何疑惑可以回复我~

#2

给力哥回复慕慕1721642 提问者

你把 div{border:2px red solid;} 这段代码注释掉看看

2018-04-26 回复有任何疑惑可以回复我~

#3

慕慕1721642 提问者回复给力哥

注释掉，确实右对齐了，why？？

2018-04-26 回复有任何疑惑可以回复我~

查看1条回复

慕慕1721642 提问者
2018-04-24

图1效果图中，盒3盒4中间有白色空隙；图2效果图中，盒3盒4中间没有白色空隙。造成这种区别的原因是什么？如果不对top或bottom定义时，默认值是什么？

0 回复有任何疑惑可以回复我~

#1

qq__若我不在你身边_0

应该是外边距magin的原因，

2018-05-11 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

初识HTML(5)+CSS(3)-升级版

参与学习 1226151 人
解答问题 18236 个

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

本课相似问答

2 回答这两个盒子一上一下都在右边怎么实现！！！

1 回答盒的内容不是默认居中的吗

2 回答为什么我的代码没有实现盒子居中呢？

1 回答盒子中间的 “五仁”怎么上下左右居中（中心位置）？

5 回答盒子位置问题

搜索更多本课相关问答

问下这3个代码是怎样实现各自的效果的？另外为什么盒4初始位置默认比盒3右移2px

我要回答关注问题

意见反馈帮助中心 APP下载