display显示与隐藏元素

最新推荐文章于 2024-02-11 10:13:10 发布

rmxob

最新推荐文章于 2024-02-11 10:13:10 发布

阅读量1.6w

点赞数 10

分类专栏：前端设计

本文链接：https://blog.csdn.net/weixin_43920680/article/details/108802168

版权

前端设计专栏收录该内容

9 篇文章 1 订阅

订阅专栏

显示与隐藏元素

- 本质

本质

让一个元素在页面隐藏或者显示出来

display

display用来设置一个元素如何进行显示

 display:none ;隐藏元素

 display:block;除了转换块元素之外，也用来显示元素

display隐藏元素后，不在占有原来的位置。

visibility

visibility:visiable;元素可视；

visibility:hidden;元素隐藏；

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

如果隐藏元素想要原来的位置，就用

visibitily:hidden

如果隐藏元素不想要原来的位置，就用

display:none

(display用处更多)

overflow

默认：visible

scroll:滚动条

auto:在需要的时候增加滚动条（溢出时才显示滚动条）

hidden:溢出隐藏

一般情况下，我们都会把溢出的部分隐藏，因为溢出的部分会影响布局。

但是如果有定位的盒子，慎用overflow:hidden 因为它会隐藏多余的部分

(定位盒子，故意超出的，如若使用hidden,会隐藏)

案例：显示与隐藏

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

</head>

<style>

  .div1{

    display: none;
      
   height: 100px;

   width: 100px;

  background-color: red;

  }

  .div2{ 

   height: 444px;

   width: 320px;

  background-color: blue;

   margin: 30px auto;

   position: relative;

  }

  .div2 img{

   width: 100%;

   height: 100%;

  }

  .mask{

  width: 100%;

  height: 100%;

 background: rgba(0,0,0,.4) url("水蜜桃.png") no-repeat center center;

 position: absolute;

 top: 0;

 left: 0;

 display: none;

  }

  .div2:hover .mask{

    display: block;

  }

</style>

<body>

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

    <div class="div2" >

        <div class="mask">



    </div>

        <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=501511919,1655485510&fm=26&gp=0.jpg" alt="">

  </div>

</body>

</html>

rmxob

关注

10
点赞
踩
53

收藏

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

显示与隐藏元素本质displayvisibilityoverflow本质让一个元素在页面隐藏或者显示出来displaydisplay用来设置一个元素如何进行显示 display:none ;隐藏元素 display:block;除了转换块元素之外，也用来显示元素display隐藏元素后，不在占有原来的位置。visibilityvisibility:visiable;元素可视；visibility:hidden;元素隐藏；visibility隐藏元素后，继续占有原来的位置。如果
复制链接

扫一扫

专栏目录