display与visibility

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            a {
                background-color: #FFFF00;
                /*为其设计一个宽和高*/
                width: 500px;
                height: 500px;
                /*
                 *内联元素不支持宽高,要是我们把它变成块元素呢
                 * display 属性规定元素应该生成的框的类型。
                 *    可选值:
                 *       inline——内联元素
                 *       block——块元素
                 *       inline-block——行内块元素(即有内联元素的属性有块元素的属性
                 *          none——不显示元素,并且元素不会在页面中继续占有位置
                 * visibility
                 *  用来设置元素的隐藏和显示状态
                 *      可选值:
                 *             visible 默认值,元素默认会在页面显示
                 *          hidden:元素隐藏不显示,但是会在页面中继续占有位置
                 *          collapse:当在表格元素中使用时,此值可删除一行或一列,
                 *               但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。
                 *               如果此值被用在其他的元素上,会呈现为 "hidden"。
                 */
                display: none;
            }
            
            tr.coll {
                visibility: collapse;
            }
        </style>
    </head>

    <body>
        <a href="#">我是一个大大的超链接</a>
        <p>我是个段落</p>
        <table border="1">
            <tr>
                <td>Adams</td>
                <td>John</td>
            </tr>
            <tr class="coll">
                <td>Bush</td>
                <td>George</td>
            </tr>
            <tr class="coll">
                <td>Bush</td>
                <td>George</td>
            </tr>
            <tr>
                <td>Bush</td>
                <td>George</td>
            </tr>
        </table>
    </body>

</html>

posted @ 2018-10-14 15:14  皮卡丘皮卡丘  阅读(99)  评论(0编辑  收藏  举报