visibility:collapse的作用

1.简述

  今天被萌新问了个问题：visibility:hidden和visibility:collapse到底什么区别？感觉都是把元素变的不可见，却能保留在文档流中的位置，但是他们两个到底什么区别？尴尬的是我真不知道这属性啥意思，平时用的时候最多就是默认visible和hidden。最后搞明白了之后记录一下。

 

2.说明

  visibility属性用于设置html元素在页面中的可见性，其常见属性值有visible(默认)、hidden，而collapse是一个相对前两者来说并不怎么常见的一个属性值。单词本身表示的含义是坍塌的意思，所以表达的意思还是挺明确的。

但是实际测试来看，collapse属性在页面中的表现和hidden没什么差别，所以去查了一下官方的说法，一目了然。

直白一点说就是：

在表格里面【visibility:collapse】表现得和【display:none】一样

在平时【visibility:collapse】表现得就和【visibility:hidden】一样

 

3.测试

（1）正常表格

<table cellspacing="10" border="1">
        <tr>
            <td>第1行，第1列</td>
            <td>第1行，第2列</td>
            <td>第1行，第3列</td>
        </tr>
        <tr>
            <td>第2行，第1列</td>
            <td>第2行，第2列</td>
            <td>第2行，第3列</td>
        </tr>
        <tr>
            <td>第3行，第1列</td>
            <td>第3行，第2列</td>
            <td>第3行，第3列</td>
        </tr>
    </table>

（2）display:none

    <tr style="display:none">
        <td>第2行，第1列</td>
        <td>第2行，第2列</td>
        <td>第2行，第3列</td>
    </tr>

（3）visibility:hidden

    <tr style="visibility: hidden">
        <td>第2行，第1列</td>
        <td>第2行，第2列</td>
        <td>第2行，第3列</td>
    </tr>

（4）visibility:collapse

    <tr style="visibility: collapse">
        <td>第2行，第1列</td>
        <td>第2行，第2列</td>
        <td>第2行，第3列</td>
    </tr>