显示控制隐藏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            
            a{
                background-color: #bfa;
                
                /*
                 * 将一个内联元素变成块元素，
                 *  通过display样式可以修改元素的类型
                 *      可选值：
                 *          inline：可以将一个元素作为内联元素显示
                 *          block: 可以将一个元素设置块元素显示
                 *          inline-block：将一个元素转换为行内块元素
                 *                  - 可以使一个元素既有行内元素的特点又有块元素的特点
                 *                      既可以设置宽高，又不会独占一行
                 *          none: 不显示元素，并且元素不会在页面中继续占有位置
                 */
                display: none;
                
                /*为其设置一个宽和高*/
                width: 500px;
                height: 500px;
            }
            
            .box{
                width: 100px;
                height: 100px;
                background-color: orange;
                
                /*
                 * display: none;
                 *  使用该方式隐藏的元素，不会在页面中显示，并且不再占据页面的位置
                 */
                /*display: none;*/
                
                /*
                 * visibility
                 *  - 可以用来设置元素的隐藏和显示的状态
                 *  - 可选值：
                 *      visible 默认值，元素默认会在页面显示
                 *      hidden 元素会隐藏不显示 
                 * 
                 * 使用 visibility:hidden;隐藏的元素虽然不会在页面中显示，
                 *      但是它的位置会依然保持
                 */
                visibility:hidden ;
            }
            
        </style>
    </head>
    <body>
        
        <div class="box"></div>
        
        <a href="#">我是一个大大的超链接</a>
        
        <span>hello</span>
        
    </body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容