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>

©️2020 CSDN 皮肤主题: 黑客帝国 设计师:上身试试 返回首页