发表于: 2019-10-24 18:35:41
1 930
今天完成的事情:任务八九
今日收获:
collapse属性
CSS里的visibility属性,大多时候,会把它的值设置成visible(这是所有页面元素的缺省值),或者是hidden。后者相当于display: none,但仍然占用页面空间。
其实visibility可以有第三种值,就是collapse。当一个元素的visibility属性被设置成collapse值后,对于一般的元素,它的表现跟hidden是一样的。但例外的是,如果这个元素是table相关的元素,例如table行,table group,table列,table column group,它的表现却跟display: none一样,也就是说,它们占用的空间也会释放。
但遗憾的是,各种浏览器对collapse值的处理方式不一样。看一下下面的演示:
在谷歌浏览器里,使用collapse值和使用hidden值没有什么区别。 (See this bug report and comments)
在火狐浏览器、Opera和IE11里,使用collapse值的效果就如它的字面意思:table的行会消失,它的下面一行会补充它的位置。
display:none和visibility:hidden的区别是:
1.display:none是彻底消失,不在文档流中占位,浏览器也不会解析该元素;visibility:hidden是视觉上消失了,可以理解为透明度为0的效果,在文档流中占位,浏览器会解析该元素;
2.使用visibility:hidden比display:none性能上要好,display:none切换显示时visibility,页面产生回流(当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等,页面重新构建,此时就是回流。所有页面第一次加载时需要产生一次回流),而visibility切换是否显示时则不会引起回流。
所以我使用visibility:hidden,在页面渲染时轮播图就可以获取宽度做自适应了。
遇到的问题:
1.按钮激活时的样式修改方法?
思路,重写active样式?如何知道active名
2.下拉按键菜单让文档流被占据向下移动的方法。
评论