目录
也能控制元素是否占有原来的位置
比如网站广告,当我们点击关闭时会消失。当我们刷新页面时会重新出现
本质:让一个元素在页面中隐藏或者显示出来
3种显示隐藏的方法:
- display 显示隐藏 不保留原先的位置
- visibility 显示隐藏 保留原先的位置
- overflow 溢出显示隐藏 对溢出的部分进行处理
display 属性(面试会问)
用于设置一个元素应如何显示
属性值 | 描述 |
---|---|
none | 隐藏对象 |
block | 除了转换为块级元素外,同时还有显示元素的意思 |
display 隐藏元素后,不再占有原来的位置
后面应用及其广泛,搭配 JS 可以做很多网页特效
visibility 可见性
属性值 | 描述 |
---|---|
inherit | 继承上一个父对象的可见性 |
visible | 对象可见 |
hidden | 对象隐藏 |
collapse | 主要用于隐藏表格中的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象,其作用等同于 hidden(较少使用) |
visibility 隐藏元素后,继续占有原先的位置
如果隐藏的元素需要占据原先的位置,使用 visibility: hidden
如果隐藏的元素不需要占据原先的位置,使用 display: none(用处更多,重点)
overflow 溢出显示隐藏
指定如果内容在一个元素的框中溢出(超过其指定的高度或宽度)时,应该如何显示
属性值 | 描述 |
---|---|
visible | 不剪切内容也不添加滚动条 |
auto | 在需要的时候剪切内容并添加滚动条 |
hidden | 不显示超过对象尺寸的内容 |
scroll | 总是显示滚动条 |
一般情况下,我们都不想让溢出的内容显示出来,因为溢出的内容会影响网页布局
但是如果有定位的盒子,请慎用 overflow: hidden; 因为它会隐藏多余的部分
综合案例
土豆网鼠标经过显示遮罩
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="tudou">
<div class="mask"></div>
<img src="images/tudou.jpg" alt="">
</div>
</body>
</html>
.tudou {
position: relative;
width: 444px;
height: 320px;
background-color: #00a4ff;
margin: 100px auto;
}
.tudou img {
width: 100%;
height: 100%;
}
.tudou .mask {
position: absolute;
display: none;
top: 0;
left: 0;
/*display: none;*/
width: 444px;
height: 320px;
background: rgba(0,0,0,.4) url("images/button.png") no-repeat center;
}
/*当鼠标经过 tudou ,让 mask 显示出来*/
.tudou:hover .mask {
display: block;
}
效果图