一、元素的显示与隐藏
类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现。
本质:让一个元素在页面中隐藏或者显示出来
☆1.display属性
- display:none;隐藏对象,隐藏元素后,不占有原来的位置。(用处更多)
- display:block:除了转换为块级元素之外,同时还有显示元素的意思。
例如:display:none效果 -
-
2.visibility可见性
inberit:规定应该从父级元素继承visibility属性的值
visible:默认值。元素是可见的。
hidden:元素是不可见的,但是visibility隐藏元素后,继续占有原来的位置(和display:none进行区分)
3.overflow溢出
溢出就像:
所以overflow属性指定了如果内容溢出一个元素的框(超过其指定高度及宽度)时,会发生什么。
属性值有:visible:溢出部分显示出来
hidden :溢出部分隐藏,但是没有被删掉
scroll:滚动条显示
auto:此为body对象和textarea的默认值,在需要时简写内容并添加滚动条。比如,高度超出的时候,添加滚动条,高度如果没有超出时,不添加滚动条,但是overflow:scroll无论溢出还是不溢出都会添加滚动条。
一般情况下,我们都不想让溢出的内容显示出来,因为溢出的部分会影响布局,但是如果有定位的盒子,请慎用overflow:hidden,银灰他会隐藏多余的部分。
案例:土豆网鼠标经过显示遮罩
每当鼠标经过一个图片的时候,会有灰色半透明的盒子盖上去
核心原理:原先半透明的黑色遮罩看不见,鼠标经过大盒子,就显示出来
遮罩的盒子不占有位置,所以应该用display:none,设置绝对定位(注意父元素要设置相对定位)
<style>
.tudou{
position:relative;
width:444px;
height:320px;
margin:30px auto;
}
.tudou img{
width:100%;
height:100%;
}
.mask{
//隐藏遮罩层
display:none:
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.4) url(img/arr.png) no-repeat center;
}
/*当我们鼠标经过了土豆这个盒子,就让里面遮罩层显示出来*/
.tudou:hover .mask{
/* 显示元素*/
display:block;
}
</style>
<body>
<div class="tudou">
<div class="mask"></div>
<img src="" alt=">
</div>
</body>
效果如下: