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

 

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

可运行下看看效果。

 

posted @   西北野狼  阅读(248)  评论(0)  编辑  收藏  举报
（评论功能已被禁用）
编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
历史上的今天：
2016-04-26 数据结构--树，二叉树
点击右上角即可分享
微信分享提示