CSS|display、visibility

最新推荐文章于 2024-05-03 12:12:21 发布

Alan_Lowe

最新推荐文章于 2024-05-03 12:12:21 发布

阅读量178

点赞数 2

分类专栏： # CSS 文章标签： css html css3

本文链接：https://blog.csdn.net/qq_45985728/article/details/119544542

版权

CSS 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

CSS|display、visibility

1.隐藏元素

隐藏元素可以用display，也可以用visibility；但是它们存在区别，display隐藏是直接让这个元素消失，而visibility隐藏是让元素看不见，但是在网页当中还实际的占据着它的位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display</title>
  <style>
    div{
        width: 300px;
        height: 300px;
        border: 10px solid blue;
        background-image: radial-gradient(ellipse,green,yellow);
    }
    .style1{
        /*消失，不再占有空间*/
        display: none;
    }
    .style2{
        /*隐藏，占有空间*/
        visibility: hidden;
    }
  </style>
</head>
<body>

<div>div1</div>
<div>div2</div>

</body>
</html>

这个时候效果为：

在这里插入图片描述

我们将div1这个块设置为display: none（引用style1这个类），看一下效果：

在这里插入图片描述

div1这个块是已经消失了，那么我们设置为visibility: hidden（引用style2这个类）：

在这里插入图片描述

我们可以看到div2不在最顶部，这是因为visibility设置的隐藏是会占据原有空间的。

2.块元素的行内显示

我们知道块元素的前面和后面都相当于有一个回车，占据了整个网页的宽度，如上述例子，div2没有和div1并没有在同一行内，我们可以通过inline将块元素设置为行内显示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display</title>
  <style>
    div{
        width: 300px;
        height: 300px;
        border: 10px solid blue;
        background-image: radial-gradient(ellipse,green,yellow);
    }
    .style1{
        /*消失，不再占有空间*/
        display: none;
    }
    .style2{
        /*隐藏，占有空间*/
        visibility: hidden;
    }
    .style3{
        /*块元素转行内显示*/
        display: inline;
    }
  </style>
</head>
<body>

<div class="style3">div1</div>
<div class="style3">div2</div>

</body>
</html>

如上，将div1和div2设置为display: inline就是将块元素转变为行内显示：

在这里插入图片描述

但是我们发现这两个块元素的大小和之前相比是变小了，是因为inline将其转变为了行内的格式，而我们要保留原有的大小和格式的话，需要将display改为inline-block：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display</title>
  <style>
    div{
        width: 300px;
        height: 300px;
        border: 10px solid blue;
        background-image: radial-gradient(ellipse,green,yellow);
    }
    .style1{
        /*消失，不再占有空间*/
        display: none;
    }
    .style2{
        /*隐藏，占有空间*/
        visibility: hidden;
    }
    .style3{
        /*块元素转行内显示*/
        display: inline;
    }
    .style4{
        /*块元素转行内显示但保留原有格式*/
        display: inline-block;
    }
  </style>
</head>
<body>

<div class="style3">div1</div>
<div class="style4">div2</div>

</body>
</html>

我们将第一个块使用inline，第二个块设置为inline-block：

在这里插入图片描述

可以看出inline和inline-block的区别。

3.行内元素的块显示

我们先在网页中放置两张图片：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display</title>
  <style>
    div{
        width: 300px;
        height: 300px;
        border: 10px solid blue;
        background-image: radial-gradient(ellipse,green,yellow);
    }
    .style1{
        /*消失，不再占有空间*/
        display: none;
    }
    .style2{
        /*隐藏，占有空间*/
        visibility: hidden;
    }
    .style3{
        /*块元素转行内显示*/
        display: inline;
    }
    .style4{
        /*块元素转行内显示但保留原有格式*/
        display: inline-block;
    }
  </style>
</head>
<body>

<div class="style3">div1</div>
<div class="style4">div2</div>
<br>
<img src="../resource/image/img.png" alt="科比图片">
<img src="../resource/image/img.png" alt="科比图片">

</body>
</html>

这样放了两张图片过后的效果：

在这里插入图片描述

两张图片在同一行，这是因为img标签是行内标签，我们如何将它们改为块格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display</title>
  <style>
    div{
        width: 300px;
        height: 300px;
        border: 10px solid blue;
        background-image: radial-gradient(ellipse,green,yellow);
    }
    .style1{
        /*消失，不再占有空间*/
        display: none;
    }
    .style2{
        /*隐藏，占有空间*/
        visibility: hidden;
    }
    .style3{
        /*块元素转行内显示*/
        display: inline;
    }
    .style4{
        /*块元素转行内显示但保留原有格式*/
        display: inline-block;
    }
    img{
        /*行内元素转块显示*/
        display: block;
    }
  </style>
</head>
<body>

<div class="style3">div1</div>
<div class="style4">div2</div>
<br>
<img src="../resource/image/img.png" alt="科比图片">
<img src="../resource/image/img.png" alt="科比图片">

</body>
</html>

效果如下：

在这里插入图片描述

人生没有白走的路，每一步都算数！

Alan_Lowe

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS|display、visibility

CSS|display、visibility1.隐藏元素隐藏元素可以用display，也可以用visibility；但是它们存在区别，display隐藏是直接让这个元素消失，而visibility隐藏是让元素看不见，但是在网页当中还实际的占据着它的位置。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>display</title&
复制链接

扫一扫