提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  工具

当前栏目

前端学习 -- Css -- display和Visibility

学习前端CSS -- display visibility
2023-09-14 09:00:30 时间

 

display

将一个内联元素变成块元素，通过display样式可以修改元素的类型。
可选值：
 1 inline：可以将一个元素作为内联元素显示。
 2 block: 可以将一个元素设置块元素显示。
 3 inline-block：将一个元素转换为行内块元素。
 - 可以使一个元素既有行内元素的特点又有块元素的特点,既可以设置宽高，又不会独占一行。
 4 none: 不显示元素，并且元素不会在页面中继续占有位置。

visibility

可以用来设置元素的隐藏和显示的状态
可选值：
1 visible 默认值，元素默认会在页面显示
2 hidden 元素会隐藏不显示

使用 visibility:hidden;隐藏的元素虽然不会在页面中显示，但是它的位置会依然保持。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            a {
                background-color: #FF0000;
                display: block;
                /*为其设置一个宽和高*/
                width: 100px;
                height: 100px;
            }
            /**
             * display: none;box不进行显示，
             */
            
            .box1 {
                width: 100px;
                height: 100px;
                background-color: red;
                display: none;
            }
            /**
             * visibility: hidden 元素隐藏
             */
            
            .box {
                width: 100px;
                height: 100px;
                background-color: green;
                visibility: hidden;
            }
            /**
             * visibility: hidden 元素显示
             */
            
            .box2 {
                width: 100px;
                height: 100px;
                background-color: blue;
                visibility: visible;
            }
        </style>
    </head>

    <body>

        <div class="box"></div>
        <div class="box1"></div>
        <div class="box2"></div>
        <a href="#">我是soyoungboy</a>

        <span>超级帅小伙</span>

    </body>

</html>

效果：

代码：

https://github.com/soyoungboy/htmlCssStudy/blob/master/HelloHBuilder/lesson17.html

可运行下看看效果。

 

相关文章