html中元素的显示与隐藏

首先我们需要了解为什么需要将一个元素隐藏起来

元素的隐藏

 

可以看到原本没有在页面中显示的元素，在页面中显示出来了，这就是元素的显示与隐藏。

接下来我们了解一下html中常用显示与隐藏元素的方法：

 元素在网页中默认是：显示

  <div class="div">
    <img src="../tuping/小刻晴.png" alt="">
  </div>

 如何将图片这个隐藏呢？

1. display: none; (display: block;将元素显示出来，还有将元素转换为块级元素的作用)

    .div>img {
      width: 100%;
      /* 将图片隐藏 */
      /* 第一种：display */
      display: none;
      /* 第二种：visibility */
      /* visibility: hidden; */
    }

需要注意的是： display: none; 将元素隐藏后，元素的位置不会保留，会被标准流元素占用

 

 2. visibility: hidden; (visibility: visible;元素可视)

    .div>img {
      width: 100%;
      /* 将图片隐藏 */
      /* 第一种：display */
      display: none;
      /* 第二种：visibility */
      /* visibility: hidden; */
    }

元素原有的位置会保留

在实际开发网页中，我们使用display: none;会多一些，因为不会影响布局

还有一种元素隐藏的方式： overflow: hidden;(overflow: visible;元素可视)

定义：overflow属性定义了如果盒子中的元素超过了盒子的宽高，也就是该元素溢出了,我们该如何处理元素 。

    .div>img {
      width: 180%;
    }

可以看到元素超出了盒子的宽高（此时overflow属性值为visible, 超出部分不做处理，默认值）

    .div {
      width: 300px;
      height: 300px;
      border: 2px solid red;
      /* 溢出部分隐藏 */
      overflow: hidden;
      /* 添加滚动条 */
      /* overflow: auto; */
      /* overflow: scroll; */
    }

 注意：这里是给盒子加 overflow属性

overflow还有 两个属性值（auto,scroll），这两个属性值都是为盒子加上滚动条

区别：

overflow：auto;只会在元素溢出的方向添加滚动条，无溢出的方向则不会做处理

overflow：scroll;无论元素是否溢出都会在 x,y 轴方向添加滚动条

① 在元素x,y方向上都溢出时（效果一致）

效果：

overflow_auto

② 在元素x方向上溢出时，

overflow: auto;效果

 overflow: scroll;效果