01
00
40
32

手机图片太大,处理

手机图片太大,处理

老师的做法:

让它漂浮起来,超出文本流(绝对定位)

在父容器上做相对定位,溢出隐藏。

问题:

漂浮:

1.float与绝对定位在脱离文档流和文本流有什么区别?

float是脱离文档流不脱离文本流。

绝对定位是既脱离文档流也脱离文本流吗?差别心中不够清晰。

2.对screen-1设置了相对定位后,紧接着给了溢出隐藏overflow:hidden,目的是什么?我自己测试不知道怎么测试什么,没发现哪里有变化。

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

同学你好,

1、关于浮动和绝对定位的区别理解的没有问题,虽然都会脱离文档流,但是浮动不会脱离文档流,例如:

http://img1.sycdn.imooc.com//climg/5d4e6484000148f604730815.jpg

http://img1.sycdn.imooc.com//climg/5d4e648f0001b3d105340485.jpg

从效果上看:

(1)图片不能将文字遮盖住,这是因为图片脱离了文档流,没有脱离文本流,文字会环绕显示。

(2)图片浮动但是不会覆盖前面的内容。设置浮动的元素会在当前行脱离文档流,如果挨着前面元素也浮动了,会跟在后面排列,如果没有浮动,就在当前行浮动,后面文字环绕。

(3)设置图片相对于div盒子进行左上角定位显示,将文字遮盖住一部分,说明既脱离了文档流,也脱离了文本流。设置相对于div盒子位置值是多少,就会在哪个位置显示。

2、课程中老师电脑的分辨率可能小一些,图片超出了显示器的宽度,出现了滚动条,所以设置了overflow:hidden;属性将超出部分隐藏。同学的显示器分辨率可能大一些,这边的分辨率也比较大,显示出来和老师效果不太一样:

http://img1.sycdn.imooc.com//climg/5d4e66c90001345d19190737.jpg

http://img1.sycdn.imooc.com//climg/5d4e66dd0001160d14900493.jpg

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

祝学习愉快!

  • 午炎子栩 提问者 #1
    很清楚,多谢老师辛苦了
    2019-08-10 14:54:21
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师
插入代码