思路很巧妙,但是有几个问题,不知道张老师看得到看不到,不过就算老师看不到也可以给其他同学一点启示。
1、样式和结构没有分离。用html标签中的空格来产生距离形成居中的样式,很明显样式和结构没有解耦。
2、如果要完全居中(不仅仅是视觉上的大概居中),其设置的margin值是需要手动计算的,正确的margin-left值应该为-空格所在文本的font-size/2加上所需居中图片的width/2。如果一开始字体和图片都是用px设置的大小,也不算问题太大,只是需要手动计算一步而已。但是如果其是用em做的自适应布局呢?那怎么求得其所需的margin-left值?还是要用到JS吧,问题也有局限性
1、样式和结构没有分离。用html标签中的空格来产生距离形成居中的样式,很明显样式和结构没有解耦。
2、如果要完全居中(不仅仅是视觉上的大概居中),其设置的margin值是需要手动计算的,正确的margin-left值应该为-空格所在文本的font-size/2加上所需居中图片的width/2。如果一开始字体和图片都是用px设置的大小,也不算问题太大,只是需要手动计算一步而已。但是如果其是用em做的自适应布局呢?那怎么求得其所需的margin-left值?还是要用到JS吧,问题也有局限性
2016-07-06
abosolute配合margin,而不用给其父元素增加position。
不仅可以节省代码,更重要的是还可以方便【自适应】。
学习了,以前一直有问题来着。
不仅可以节省代码,更重要的是还可以方便【自适应】。
学习了,以前一直有问题来着。
2016-07-06
超越overflow,仔细看你会发现,为什么关闭按钮(代码中即class为close的a)明明放在滚动的div中,其父元素设置了overflow为auto,但是滚动时候其他俩个div都滚动,但是这个关闭按钮却不滚动?那是因为绝对定位absolute并不是相对于其父元素定位的,而是相对于其【包含块】定位的,如果给其父元素position:relative另其形成【包含块】,内部的关闭按钮就也会滚动了,大家可以试一试。
2016-07-06
这节最后的例子,在容器中的子元素设置了absolute,其绝对定位是根据其【包含块】来定位,因为其容器并未设置position为relative/absolute/fixed中的任何一个,自身就不形成 【包含块】,所以子元素的定位就不是按照其直接容器定位了,所以哪怕滑动位置也不会变。
关于【包含块】的概念如果有不懂的同学,可以翻翻张老师的博客,也可以看慕课网上张老师的另一个教学视频----CSS深入理解float。
这视频被喷的很惨,切勿跟风,认真学的话可以学到蛮多东西的。
关于【包含块】的概念如果有不懂的同学,可以翻翻张老师的博客,也可以看慕课网上张老师的另一个教学视频----CSS深入理解float。
这视频被喷的很惨,切勿跟风,认真学的话可以学到蛮多东西的。
2016-07-05