display显示与隐藏元素
显示与隐藏元素
- 本质
- display
- visibility
- overflow
本质
让一个元素在页面隐藏或者显示出来
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,会隐藏)
案例：显示与隐藏
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle>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>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！