display和visibility 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            a{
                background-color: #BBFFAA;
                /*
                    将一个内联元素变成块元素
                    通过display样式可以修改元素类型
                        可选值：
                            inline：可将一个元素作为内联元素显示
                            block：可以将一个元素设置块元素显示
                            inline-block：可以将一个元素转换为行内块元素    
                                        - 可以使一个元素既有行内元素特点又有块元素特点
                                            既可以设置宽高又不独占一行
                            none ：不显示元素，并且元素不会在页面中继续占有位置
                                
                */
               display: inline-block;
               
               
               
            }
            .box{
                width: 100px;
                height: 100px;
                background-color: #BBFFAA;
                /*
                    display: none;
                    使用该方式隐藏的元素，不会显示，并且不占有页面位置
                */
               /* display: none; */
               
               /*
                    visibility
                        - 可以用来设置元素的隐藏和显示状态
                        - 可选值：
                            visible 默认值，元素默认会在页面显示
                            hidden 元素会隐藏不显示
                            
                    使用visibility：hidden；隐藏元素虽然不会在页面中显示
                        但 它的位置会依然保持
               */
              visibility: hidden;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
        <a href="#">我是一个超链接</a>
        <span>奥术大师</span>
    </body>
</html>

 将内联元素变成块元素

display 可选值

　　　　inline 将一个元素作为内联元素显示

　　　　block 可以将一个元素设置块元素显示

　　　　inline-block 将一个元素转换为行内块元素

　　　　　　　　　　可设置宽高不独占一行

　　　　none 不显示元素，元素不会在页面中独占一行

visibility 用来设置元素的隐藏和显示状态

　　　　可选值

　　　　　　visible 默认值，元素默认在页面显示

　　　　　　hidden 元素隐藏不显示，但位置依然保持

posted @ 2021-07-04 15:08  2237774566  阅读(57)  评论(0)    收藏  举报