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>

这个时候效果为：

CSS|display、visibility_块元素

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

CSS|display、visibility_html_02

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

CSS|display、visibility_块元素_03

我们可以看到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就是将块元素转变为行内显示：

CSS|display、visibility_css3_04

但是我们发现这两个块元素的大小和之前相比是变小了，是因为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：

CSS|display、visibility_css3_05

可以看出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>

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

CSS|display、visibility_css_06

两张图片在同一行，这是因为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>

效果如下：

CSS|display、visibility_块元素_07

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