为了账号安全,请及时绑定邮箱和手机立即绑定
思路很巧妙,但是有几个问题,不知道张老师看得到看不到,不过就算老师看不到也可以给其他同学一点启示。
1、样式和结构没有分离。用html标签中的空格来产生距离形成居中的样式,很明显样式和结构没有解耦。
2、如果要完全居中(不仅仅是视觉上的大概居中),其设置的margin值是需要手动计算的,正确的margin-left值应该为-空格所在文本的font-size/2加上所需居中图片的width/2。如果一开始字体和图片都是用px设置的大小,也不算问题太大,只是需要手动计算一步而已。但是如果其是用em做的自适应布局呢?那怎么求得其所需的margin-left值?还是要用到JS吧,问题也有局限性
太巧妙了,但是样式和结构没有分离呀。
无依赖,absolute通过margin来相对定位,而不是top。
abosolute配合margin,而不用给其父元素增加position。
不仅可以节省代码,更重要的是还可以方便【自适应】。
学习了,以前一直有问题来着。
超越overflow,仔细看你会发现,为什么关闭按钮(代码中即class为close的a)明明放在滚动的div中,其父元素设置了overflow为auto,但是滚动时候其他俩个div都滚动,但是这个关闭按钮却不滚动?那是因为绝对定位absolute并不是相对于其父元素定位的,而是相对于其【包含块】定位的,如果给其父元素position:relative另其形成【包含块】,内部的关闭按钮就也会滚动了,大家可以试一试。
这节最后的例子,在容器中的子元素设置了absolute,其绝对定位是根据其【包含块】来定位,因为其容器并未设置position为relative/absolute/fixed中的任何一个,自身就不形成 【包含块】,所以子元素的定位就不是按照其直接容器定位了,所以哪怕滑动位置也不会变。
关于【包含块】的概念如果有不懂的同学,可以翻翻张老师的博客,也可以看慕课网上张老师的另一个教学视频----CSS深入理解float。
这视频被喷的很惨,切勿跟风,认真学的话可以学到蛮多东西的。
你们可以测试一下,用一个span设置其position为absolute后,可以对其设置高和宽了,但同时对div等块级元素又具备包裹性,可知absolute设置后的元素其表现既不是block的表现,也不是inline的表现,反而是inline-block的表现。
诸君,不要靠猜测了,自己动手去做做实现。
这个特效蛮有趣的嘛
求分享……老师的博客地址
讲的很好啊。很感谢
好牛逼啊!!!!
哈哈哈哈 画的好好
老师讲课方式好可怕……
学习了。! 老师对CSS的理解真是透彻,大学那会儿您的博客我每篇都不落下。
课程须知
虽说是深入,实际更适合鲜肉小伙伴
老师告诉你能学到什么?
absolute基本特性的感性认知。absolute可能的理解误区纠正。absolute诸多高级技巧的应用实例。absolute在移动web布局中的大放异彩。

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消