元素的显示与隐藏

最新推荐文章于 2024-07-19 10:49:05 发布

倔强的小白菜

最新推荐文章于 2024-07-19 10:49:05 发布

阅读量260

点赞数

分类专栏：前端基础文章标签： css3 css 前端

本文链接：https://blog.csdn.net/weixin_47481102/article/details/125068339

版权

前端基础专栏收录该内容

51 篇文章 2 订阅

订阅专栏

类似网站广告，当我们点击关闭就不见，但是我们重新刷新页面，会重新出现！

本质：让一个元素在页面中隐藏或者显示出来。

1.display 显示隐藏

2.visibility 显示隐藏

3.overflow 溢出显示隐藏

1.display属性***

display属性用于设置一个元素应如何显示。

display：none；隐藏对象
display：block；除了转换为块级元素之外，同时还显示元素的意思、

display隐藏属性后，不再占有原来的位置。

后面应用及其广泛，搭配js可以做很多的页面效果。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>元素的显示与隐藏之display属性</title>
    <style>
      .pappe {
        /* display属性用于设置一个元素应如何显示。
          display：none；隐藏属性；
          display：block；除了转换为块级元素之外，同时有显示元素的意思
          display隐藏元素后，不再占有原来位置
          应用及其广泛，搭配js可以做很多的网页特效 */
        display: none;
        display: block;
        width: 200px;
        height: 200px;
        background-color: pink;
      }

      .george {
        width: 200px;
        height: 200px;
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <div class="pappe">佩奇妹妹</div>
    <div class="george">乔治哥哥</div>
  </body>
</html>

2.visibility 可见性

visibility属性用于指定一个元素应可见还是隐藏。

visibility：visible；元素可见
visibility：hidden；元素隐藏

visibility隐藏元素后，继续占有原来的位置。

如果隐藏元素想要原来位置，就用visibility：hidden

如果隐藏元素不想要原来位置，就用display：none（用处更多重点）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>元素的显示与隐藏之visibility属性</title>
    <style>
      .baba {
        /* visibility属性用于指定一个元素可见还是隐藏
          visibility：visible；元素可视
          visibility：hidden；元素隐藏
          visibility隐藏元素后，继续占有原来位置
          如果隐藏元素想要原来的位置，就用visibility：hidden；
          如果隐藏元素不想要原来的位置，就用display：none；（用处更多 重点） */
        visibility: hidden;
        visibility: visible;
        width: 200px;
        height: 200px;
        background-color: pink;
      }

      .mama {
        width: 200px;
        height: 200px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div class="baba">猪爸爸</div>
    <div class="mama">猪妈妈</div>
  </body>
</html>

3.overflow溢出

overflow属性指定了如果内容溢出一个元素的框（超出了指定高度及宽度）时，会发生什么。

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容，超出部分隐藏掉
scroll	不管超出内容否，总显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

一般情况下，不想让溢出的内容显示出来，因为溢出的部分会影响布局。

但是如果有定位的盒子，请慎用coverflow：hidden 因为他会隐藏多余的部分。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>元素的显示与隐藏之overflow溢出</title>
    <style>
      p {
        /* overflow属性指定了如果内容溢出一个元素的框（超过其指定的高度及宽度）时会发生什么
        一般情况下，不会想要溢出的内容展示出来，因为溢出的内容会影响布局
        但是如果有定位的盒子，请慎用overflow：hidden 因为他会隐藏多余的部分 */
        /* 1. visible ，overflow属性的默认值，不剪切内容也不添加滚动条 */
        /* overflow: visible; */
        /* 2.hidden  不显示超过对象尺寸的内容，超出的部分隐藏掉 */
        /* overflow: hidden; */
        /* 3.scroll  总是显示滚动条，不管是否有溢出内容 两侧展示滚动条 */
        /* overflow: scroll; */
        /* 4.auto 只有有溢出内容时才显示滚动条  一侧展示滚动条*/
        overflow: auto;
        width: 200px;
        height: 200px;
        border: 1px solid pink;
        margin: 100px auto;
      }
    </style>
  </head>
  <body>
    <p>
      因使用超过保质期的食品原料加工制作食品，愚园路上的网红咖啡店“WHEN PIGS FLY
      当猪飞”（上海粉猪餐饮有限公司）被长宁区市场监管局依法立案调查。
      解放日报·上观新闻记者今天（5月25日）从上海市场监管部门了解到，5月12日，长宁区市场监管局执法人员现场检查上海粉猪餐饮有限公司时发现，当事人厨房冷加工食品专间的垃圾桶内有4个已用完的巴氏杀菌蛋白液盒子。
      其中一个蛋白液盒子的外包装标签标示生产日期/批号为“2022030613010”，保质期为45天（贮存条件：0-4℃冷藏），执法人员现场检查时，已超过保质期20多天。
      据店内厨师现场陈述，上述蛋白液检查当天已作为原料，全部用于加工制作半成品切片蛋糕卷胚，共加工制作了24片半成品切片蛋糕卷胚。
    </p>
  </body>
</html>

4.总结

display显示隐藏元素，但是不保留位置
visibility显示隐藏元素，但是不保留原来的位置
overflow 溢出显示隐藏，但是只是对于溢出的部分处理

5.练习-土豆网鼠标经过显示遮挡

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>综合练习</title>
    <style>
      .tudou {
        /* 子绝父相 */
        position: relative;
        width: 440px;
        height: 330px;
        margin: 100px auto;
        background-color: antiquewhite;
      }

      img {
        width: 100%;
        height: 100%;
      }

      .mask {
        /* 隐藏遮挡层 */
        display: none;
        /* 绝对定位 */
        position: absolute;
        top: 0;
        left: 0;
        width: 440px;
        height: 330px;
        /* 背景复合写法：背景颜色 背景图片地址 背景平铺 北京图像滚动 背景图片位置；
        background：transparent url() repeat-y fixed top */
        background: rgba(0, 0, 0, 0.4) url(images/bf.png) no-repeat center;
      }

      /* 经过土豆这个盒子  使遮挡层显示 */
      .tudou:hover .mask {
        /* 显示遮挡层 */
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="tudou">
      <img src="images/4.jpg" alt="" />
      <div class="mask"></div>
    </div>
  </body>
</html>

倔强的小白菜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
元素的显示与隐藏

类似网站广告，当我们点击关闭就不见，但是我们重新刷新页面，会重新出现！本质：让一个元素在页面中隐藏或者显示出来。1.display 显示隐藏2.visibility 显示隐藏3.overflow 溢出显示隐藏1.display属性***display属性用于设置一个元素应如何显示。display：none；隐藏对象 display：block；除了转换为块级元素之外，同时还显示元素的意思、display隐藏属性后，不再占有原来的位置。后面应用及其广泛，搭配js可以做很多
复制链接

扫一扫

专栏目录