display显示与隐藏元素

2024-07-04 14:42| 来源: 网络整理| 查看: 265

显示与隐藏元素本质displayvisibilityoverflow

本质

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

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,会隐藏)

案例：显示与隐藏

Document .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; }

【本文地址】

公司简介

联系我们