CSS基础笔记-元素的显示与隐藏

一、元素的显示与隐藏

类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现。
本质:让一个元素在页面中隐藏或者显示出来

☆1.display属性

  • display:none;隐藏对象,隐藏元素后,不占有原来的位置。(用处更多)
  • display:block:除了转换为块级元素之外,同时还有显示元素的意思。
    例如:display:none效果 -没有加入display:none

-加入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>

效果如下:
在这里插入图片描述

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值