_桑
2016-03-09 17:01
为什么把box1,box2的代码和box3,box4的代码写的一样,但是呈现的效果却不一样呢?一个在内部顶部,一个在外部底部。
你是写position:relative和absolute,可是你有写bottom:0;吗??这里子盒子的参照物是父盒子.你再设置子盒子的top和right为0看看,是不是一样大小了呢?
box1与box2是两层嵌套关系,父层box1内没有直接元素,所以子层box2里的文本显示在box1内部的左上角。
box3里有直接元素img,img属于内联块元素,同时具有内联元素和块元素的特性,所以后面跟着的块元素box4会另外占一行,不与img同行显示,更不能悬浮在img之上。
box1和box2在body中的代码结构,跟<img>和box4的结构是不一样的,仔细看下,只是css语句一样。效果当然不同了
因为box2是行内标签,所以他在box1这个盒子里,但box3和4都是块状标签,所以在你没设置其相对距离时显示是默认顺序,我是新手,不知道说的对不对。
初识HTML(5)+CSS(3)-升级版
1225806 学习 · 18234 问题
相似问题