零基础学习CSS(17)——display、visibility

最新推荐文章于 2023-09-27 14:53:59 发布

Dragon水魅

最新推荐文章于 2023-09-27 14:53:59 发布

阅读量286

点赞数

分类专栏：零基础学习Web开发文章标签： html css

本文链接：https://blog.csdn.net/qq_43650934/article/details/109146778

版权

零基础学习Web开发专栏收录该内容

45 篇文章 2 订阅

订阅专栏

官方资料

鱼C课程案例库：https://ilovefishc.com/html5/
html5速查手册：https://man.ilovefishc.com/html5/
css速查手册：https://man.ilovefishc.com/css3/

学习正文

display：https://man.ilovefishc.com/pageCSS3/display.html
visibility：https://man.ilovefishc.com/pageCSS3/visibility.html

可通过 display 使元素在行内元素和块级元素中互换：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>元素尺寸</title>
    <style type="text/css">
        span {
            display: block;
            /* display: inline  设置为行内元素 */
        }
    </style>
</head>
<body>
    <span>span是行内元素</span>
    <span>行内元素</span>
    <span>无法换行</span>
</body>
</html>

使用 inline-block 设置行内块元素：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>元素尺寸</title>
    <style type="text/css">
        #niv a{
            display: inline-block;
            width: 200px;
            height: 50px;
            color: white;
            background: #429296;
            text-align: center;  /* 水平居中 */
            line-height: 50px;  /* 垂直居中（和height数值一样） */
        }
    </style>
</head>
<body>
    <div id="niv">
        <a href="https://www.baidu.com/">百度</a>
        <a href="https://cn.bing.com/">Bing</a>
        <a href="https://www.sogou.com/">搜狗</a>
        <a href="https://www.so.com/">360搜索</a>
    </div>
</body>
</html>

使用 display: none 使元素消失：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>元素尺寸</title>
    <style type="text/css">
        #none {
            display: none;
        }
    </style>
</head>
<body>
    <div id="niv">
        <p>第一个</p>
        <p id="none">第二个消失了</p>
        <p>第三个</p>
    </div>
</body>
</html>

使用 visibility: hidden 使元素消失并且占位：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>元素尺寸</title>
    <style type="text/css">
        #none {
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div id="niv">
        <p>第一个</p>
        <p id="none">第二个消失了</p>
        <p>第三个</p>
    </div>
</body>
</html>

Dragon水魅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
零基础学习CSS(17)——display、visibility

官方资料鱼C课程案例库：https://ilovefishc.com/html5/html5速查手册：https://man.ilovefishc.com/html5/css速查手册：https://man.ilovefishc.com/css3/学习正文display：https://man.ilovefishc.com/pageCSS3/display.htmlvisibility：https://man.ilovefishc.com/pageCSS3/visibility.html可通过
复制链接

扫一扫

专栏目录