手机图片太大,处理
老师的做法:
让它漂浮起来,超出文本流(绝对定位)
在父容器上做相对定位,溢出隐藏。
问题:
漂浮:
1.float与绝对定位在脱离文档流和文本流有什么区别?
float是脱离文档流不脱离文本流。
绝对定位是既脱离文档流也脱离文本流吗?差别心中不够清晰。
2.对screen-1设置了相对定位后,紧接着给了溢出隐藏overflow:hidden,目的是什么?我自己测试不知道怎么测试什么,没发现哪里有变化。
正在回答
同学你好,
1、关于浮动和绝对定位的区别理解的没有问题,虽然都会脱离文档流,但是浮动不会脱离文档流,例如:


从效果上看:
(1)图片不能将文字遮盖住,这是因为图片脱离了文档流,没有脱离文本流,文字会环绕显示。
(2)图片浮动但是不会覆盖前面的内容。设置浮动的元素会在当前行脱离文档流,如果挨着前面元素也浮动了,会跟在后面排列,如果没有浮动,就在当前行浮动,后面文字环绕。
(3)设置图片相对于div盒子进行左上角定位显示,将文字遮盖住一部分,说明既脱离了文档流,也脱离了文本流。设置相对于div盒子位置值是多少,就会在哪个位置显示。
2、课程中老师电脑的分辨率可能小一些,图片超出了显示器的宽度,出现了滚动条,所以设置了overflow:hidden;属性将超出部分隐藏。同学的显示器分辨率可能大一些,这边的分辨率也比较大,显示出来和老师效果不太一样:


如果同学电脑显示器分辨率也比较大的话,设置不设置超出隐藏属性都是可以的。
祝学习愉快!

恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧