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

最新推荐文章于 2024-05-03 12:12:21 发布

qq_44114147

最新推荐文章于 2024-05-03 12:12:21 发布

阅读量473

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_44114147/article/details/122842275

版权

一、元素的显示与隐藏

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

☆1.display属性

display：none；隐藏对象，隐藏元素后，不占有原来的位置。（用处更多）
display：block：除了转换为块级元素之外，同时还有显示元素的意思。
例如：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>

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

在这里插入图片描述

qq_44114147

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础笔记-元素的显示与隐藏

一、元素的显示与隐藏类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现。本质：让一个元素在页面中隐藏或者显示出来☆1.display属性display：none；隐藏对象，隐藏元素后，不占有原来的位置。（用处更多）display：block：除了转换为块级元素之外，同时还有显示元素的意思。例如：display：none效果 --2.visibility可见性inberit：规定应该从父级元素继承visibility属性的值visible：默认值。元素是可见的
复制链接

扫一扫