类似网站广告,当我们点击关闭就不见,但是我们重新刷新页面,会重新出现!
本质:让一个元素在页面中隐藏或者显示出来。
1.display 显示隐藏
2.visibility 显示隐藏
3.overflow 溢出显示隐藏
1.display属性***
display属性用于设置一个元素应如何显示。
- display:none; 隐藏对象
- display:block;除了转换为块级元素之外,同时还显示元素的意思、
display隐藏属性后,不再占有原来的位置。
后面应用及其广泛,搭配js可以做很多的页面效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>元素的显示与隐藏之display属性</title>
<style>
.pappe {
/* display属性用于设置一个元素应如何显示。
display:none;隐藏属性;
display:block;除了转换为块级元素之外,同时有显示元素的意思
display隐藏元素后,不再占有原来位置
应用及其广泛,搭配js可以做很多的网页特效 */
display: none;
display: block;
width: 200px;
height: 200px;
background-color: pink;
}
.george {
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="pappe">佩奇妹妹</div>
<div class="george">乔治哥哥</div>
</body>
</html>
2.visibility 可见性
visibility属性用于指定一个元素应可见还是隐藏。
- visibility:visible; 元素可见
- visibility:hidden; 元素隐藏
visibility隐藏元素后,继续占有原来的位置。
如果隐藏元素想要原来位置,就用visibility:hidden
如果隐藏元素不想要原来位置,就用display:none(用处更多 重点)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>元素的显示与隐藏之visibility属性</title>
<style>
.baba {
/* visibility属性用于指定一个元素可见还是隐藏
visibility:visible;元素可视
visibility:hidden;元素隐藏
visibility隐藏元素后,继续占有原来位置
如果隐藏元素想要原来的位置,就用visibility:hidden;
如果隐藏元素不想要原来的位置,就用display:none;(用处更多 重点) */
visibility: hidden;
visibility: visible;
width: 200px;
height: 200px;
background-color: pink;
}
.mama {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="baba">猪爸爸</div>
<div class="mama">猪妈妈</div>
</body>
</html>
3.overflow溢出
overflow属性指定了如果内容溢出一个元素的框(超出了指定高度及宽度)时,会发生什么。
属性值 | 描述 |
visible | 不剪切内容也不添加滚动条 |
hidden | 不显示超过对象尺寸的内容,超出部分隐藏掉 |
scroll | 不管超出内容否,总显示滚动条 |
auto | 超出自动显示滚动条,不超出不显示滚动条 |
一般情况下,不想让溢出的内容显示出来,因为溢出的部分会影响布局。
但是如果有定位的盒子,请慎用coverflow:hidden 因为他会隐藏多余的部分。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>元素的显示与隐藏之overflow溢出</title>
<style>
p {
/* overflow属性指定了如果内容溢出一个元素的框(超过其指定的高度及宽度)时会发生什么
一般情况下,不会想要溢出的内容展示出来,因为溢出的内容会影响布局
但是如果有定位的盒子,请慎用overflow:hidden 因为他会隐藏多余的部分 */
/* 1. visible ,overflow属性的默认值,不剪切内容也不添加滚动条 */
/* overflow: visible; */
/* 2.hidden 不显示超过对象尺寸的内容,超出的部分隐藏掉 */
/* overflow: hidden; */
/* 3.scroll 总是显示滚动条,不管是否有溢出内容 两侧展示滚动条 */
/* overflow: scroll; */
/* 4.auto 只有有溢出内容时才显示滚动条 一侧展示滚动条*/
overflow: auto;
width: 200px;
height: 200px;
border: 1px solid pink;
margin: 100px auto;
}
</style>
</head>
<body>
<p>
因使用超过保质期的食品原料加工制作食品,愚园路上的网红咖啡店“WHEN PIGS FLY
当猪飞”(上海粉猪餐饮有限公司)被长宁区市场监管局依法立案调查。
解放日报·上观新闻记者今天(5月25日)从上海市场监管部门了解到,5月12日,长宁区市场监管局执法人员现场检查上海粉猪餐饮有限公司时发现,当事人厨房冷加工食品专间的垃圾桶内有4个已用完的巴氏杀菌蛋白液盒子。
其中一个蛋白液盒子的外包装标签标示生产日期/批号为“2022030613010”,保质期为45天(贮存条件:0-4℃冷藏),执法人员现场检查时,已超过保质期20多天。
据店内厨师现场陈述,上述蛋白液检查当天已作为原料,全部用于加工制作半成品切片蛋糕卷胚,共加工制作了24片半成品切片蛋糕卷胚。
</p>
</body>
</html>
4.总结
- display显示隐藏元素,但是不保留位置
- visibility显示隐藏元素,但是不保留原来的位置
- overflow 溢出显示隐藏,但是只是对于溢出的部分处理
5.练习-土豆网鼠标经过显示遮挡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>综合练习</title>
<style>
.tudou {
/* 子绝父相 */
position: relative;
width: 440px;
height: 330px;
margin: 100px auto;
background-color: antiquewhite;
}
img {
width: 100%;
height: 100%;
}
.mask {
/* 隐藏遮挡层 */
display: none;
/* 绝对定位 */
position: absolute;
top: 0;
left: 0;
width: 440px;
height: 330px;
/* 背景复合写法:背景颜色 背景图片地址 背景平铺 北京图像滚动 背景图片位置;
background:transparent url() repeat-y fixed top */
background: rgba(0, 0, 0, 0.4) url(images/bf.png) no-repeat center;
}
/* 经过土豆这个盒子 使遮挡层显示 */
.tudou:hover .mask {
/* 显示遮挡层 */
display: block;
}
</style>
</head>
<body>
<div class="tudou">
<img src="images/4.jpg" alt="" />
<div class="mask"></div>
</div>
</body>
</html>