html中元素的显示与隐藏

本文介绍: 还有一种元素隐藏的方式： overflow: hidden;overflow 属性定义了如果盒子中的元素超过了盒子的宽高，也就是该元素溢出了,我们该如何处理元素。可以看到元素超出了盒子的宽高（此时overflow 属性值为 visible, 超出部分不做处理，默认值）可以看到原本没有在页面中显示的元素，在页面中显示出来了，这就是元素的显示与隐藏。在实际开发网页中，我们使用 display: none;将元素显示出来，还有。① 在元素 x,y方向上都溢出时（效果一致）元素的位置不会保留，会被标准流元素占用。

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

元素的隐藏

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

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

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

  &lt;div class="div"&gt;
    &lt;img src="../tuping/小刻晴.png" alt=""&gt;
  &lt;/div&gt;

如何将图片这个隐藏呢？

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

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

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

2. vi si bi lity: hidden; (vi si bi lity: visible;元素可视)

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

元素原有的位置会保留

在实际开发网页中，我们使用 di s play: non e;会多一些，因为不会影响布局

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

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

    .div&gt;img {
      width: 180%;
    }

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

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