请选择 进入手机版 | 继续访问电脑版

叶子网络bbs论坛

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 11555|回复: 0

CSS里的visibility属性有个鲜为人知的属性值:collapse

[复制链接]

47

主题

110

帖子

1565

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1565
发表于 2017-6-9 01:39:20 | 显示全部楼层 |阅读模式

虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。

对于CSS里的 visibility 属性,相信你用过不下几百次。大多时候,你会把它的值设置成 visible (这是所有页面元素的缺省值),或者是 hidden 。后者相当于 display: none ,但仍然占用页面空间。

其实 visibility 可以有第三种值,就是 collapse 。当一个元素的 visibility 属性被设置成 collapse 值后,对于一般的元素,它的表现跟 hidden 是一样的。但例外的是,如果这个元素是table相关的元素,例如table行,table group,table列,table column group,它的表现却跟 display: none 一样,也就是说,它们占用的空间也会释放。

但遗憾的是,各种浏览器对 collapse 值的处理方式不一样。看一下下面的演示:

HTML代码
  1. <table cellspacing="0" class="table lazy ">
  2.   <tr>
  3.     <th>Fruits</th>
  4.     <th>Vegetables</th>
  5.     <th>Rocks</th>
  6.   </tr>
  7.   <tr>
  8.     <td>Apple</td>
  9.     <td>Celery</td>
  10.     <td>Granite</td>
  11.   </tr>
  12.   <tr>
  13.     <td>Orange</td>
  14.     <td>Cabbage</td>
  15.     <td>Flint</td>
  16.   </tr>
  17. </table>

  18. <p><button>collapse行1</button></p>

  19. <p><button>hide行1</button></p>

  20. <p><button>重置</button></p>
复制代码
CSS代码
  1. body {
  2.   text-align: center;
  3.   padding-top: 20px;
  4.   font-family: Arial, sans-serif;
  5. }

  6. table {
  7.   border-collapse: separate;
  8.   border-spacing: 5px;
  9.   border: solid 1px black;
  10.   width: 500px;
  11.   margin: 0 auto;
  12. }

  13. th, td {
  14.   text-align: center;
  15.   border: solid 1px black;
  16.   padding: 10px;
  17. }

  18. .vc {
  19.   visibility: collapse;
  20. }

  21. .vh {
  22.   visibility: hidden;
  23. }

  24. button {
  25.   margin-top: 5px;
  26. }
复制代码
Javascript代码
  1. var btns = document.getElementsByTagName('button'),
  2.     rows = document.getElementsByTagName('tr');

  3. btns[0].addEventListener('click', function () {
  4.   rows[1].className = 'vc';
  5. }, false);

  6. btns[1].addEventListener('click', function () {
  7.   rows[1].className = 'vh';
  8. }, false);

  9. btns[2].addEventListener('click', function () {
  10.   rows[1].className = '';
  11. }, false);
复制代码
演示

CSS-Tricks的Almanac建议说不要使用这个值,因为浏览器的不统一。

据我的观察:

  • 在谷歌浏览器里,使用 collapse 值和使用 hidden 值没有什么区别。 (See this bug report and comments )
  • 在火狐浏览器、Opera和IE11里,使用 collapse 值的效果就如它的字面意思:table的行会消失,它的下面一行会补充它的位置。

说实话,估计这个值很少人会使用它,但你要知道确实可以使用这样的一个值,如果以前不知道它,那么,现在,在有些罕见的地方,你也许就会变得聪明一点了。



回复

使用道具 举报

手机版|Archiver|叶子官网|杭州轩翼网络科技有限公司 ( 浙ICP备17027999号

GMT+8, 2024-3-28 17:46 , Processed in 0.287428 second(s), 22 queries .

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表