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

如图：为什么呈现的效果却不一样呢？

为什么把box1，box2的代码和box3，box4的代码写的一样，但是呈现的效果却不一样呢？一个在内部顶部，一个在外部底部。

_桑

2016-03-09

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

关注问题我要回答

822

操作

收起

4 回答

Seeyou1 回答被采纳 +3 积分
2016-03-09

你是写position:relative和absolute,可是你有写bottom:0;吗??这里子盒子的参照物是父盒子.你再设置子盒子的top和right为0看看,是不是一样大小了呢?

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

#1

_桑提问者

我的意思是为什么在相同的代码下，呈现效果不一样，box2并没有写top和right啊

2016-03-09 回复有任何疑惑可以回复我~

#2

Seeyou1 回复 _桑提问者

因为你下面的图片占住那个位子了,它就自动往下排了.你可以把图片删掉试试

2016-03-09 回复有任何疑惑可以回复我~

#3

Seeyou1 回复 _桑提问者

他是流动行嘛

2016-03-09 回复有任何疑惑可以回复我~

查看2条回复

_Jack_Han_
2016-04-09

box1与box2是两层嵌套关系，父层box1内没有直接元素，所以子层box2里的文本显示在box1内部的左上角。

box3里有直接元素img，img属于内联块元素，同时具有内联元素和块元素的特性，所以后面跟着的块元素box4会另外占一行，不与img同行显示，更不能悬浮在img之上。

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

_chen_
2016-03-24

box1和box2在body中的代码结构，跟<img>和box4的结构是不一样的，仔细看下，只是css语句一样。效果当然不同了

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

无怨无悔天真无邪
2016-03-09

因为box2是行内标签，所以他在box1这个盒子里，但box3和4都是块状标签，所以在你没设置其相对距离时显示是默认顺序，我是新手，不知道说的对不对。

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

#1

_桑提问者

不是啊，box2也是块状标签啊，div里面的嘛

2016-03-09 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

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

参与学习 1225771 人
解答问题 18234 个

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

本课相似问答

2 回答为什么填充数值一样，而效果却不是想要的效果？？

3 回答为什么效果不一样

2 回答&nbsp和&nbsp;呈现的效果不都一样么，还加那个：干啥

3 回答代码一样，为什么显示结果却不一样？

1 回答同样的代码为什么效果不一样

搜索更多本课相关问答

如图：为什么呈现的效果却不一样呢？

我要回答关注问题

意见反馈帮助中心 APP下载