类似网站广告,当我们点击关闭就不见了,但是重新刷新页面,就会重新出现,这些涉及到了元素的显示与隐藏。
display属性:用于设置一个元素应如何显示。
display: none; 隐藏对象
display: block; 除了转换为块级元素意外,同时还有显示元素的意思。
display隐藏元素后,不再占有原来的位置。
<!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>
.peiqi {
/* 隐藏元素,并且不再占有原来的位置 */
display: none;
width: 200px;
height: 200px;
background-color: pink;
}
.qiaozhi {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="peiqi">佩奇</div>
<div class="qiaozhi">乔治</div>
</body>
</html>
效果图:
visibility属性:用于指定一个元素应可见还是隐藏。
visibility: visible; 元素可视
visibility: hidden; 元素隐藏
visibility隐藏元素后,继续占有原来的位置。
overflow属性:指定了如果内容溢出一个元素的框(超过其指定高度及宽度)时,会发生什么。
overflow: 属性值;
属性值有:
visible:不剪切内容,也不添加滚动条。(默认值)
auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
hidden:不显示超过对象尺寸的内容。
scroll:总是显示滚动条。
<!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>
div {
display: inline-block;
width: 300px;
height: 300px;
border: 1px solid red;
}
.visible {
overflow: visible;
}
.auto {
overflow: auto;
}
.hidden {
overflow: hidden;
}
.scroll {
overflow: scroll;
}
</style>
</head>
<body>
<div class="visible">
visible:不剪切内容,也不添加滚动条。(默认值)
visible:不剪切内容,也不添加滚动条。(默认值)
visible:不剪切内容,也不添加滚动条。(默认值)
visible:不剪切内容,也不添加滚动条。(默认值)
visible:不剪切内容,也不添加滚动条。(默认值)
visible:不剪切内容,也不添加滚动条。(默认值)
visible:不剪切内容,也不添加滚动条。(默认值)
visible:不剪切内容,也不添加滚动条。(默认值)
visible:不剪切内容,也不添加滚动条。(默认值)
visible:不剪切内容,也不添加滚动条。(默认值)
visible:不剪切内容,也不添加滚动条。(默认值)
visible:不剪切内容,也不添加滚动条。(默认值)
visible:不剪切内容,也不添加滚动条。(默认值)
visible:不剪切内容,也不添加滚动条。(默认值)
visible:不剪切内容,也不添加滚动条。(默认值)
visible:不剪切内容,也不添加滚动条。(默认值)
visible:不剪切内容,也不添加滚动条。(默认值)
visible:不剪切内容,也不添加滚动条。(默认值)
visible:不剪切内容,也不添加滚动条。(默认值)
visible:不剪切内容,也不添加滚动条。(默认值)
visible:不剪切内容,也不添加滚动条。(默认值)
visible:不剪切内容,也不添加滚动条。(默认值)
visible:不剪切内容,也不添加滚动条。(默认值)
visible:不剪切内容,也不添加滚动条。(默认值)
visible:不剪切内容,也不添加滚动条。(默认值)
visible:不剪切内容,也不添加滚动条。(默认值)
visible:不剪切内容,也不添加滚动条。(默认值)
visible:不剪切内容,也不添加滚动条。(默认值)
</div>
<div class="auto">
auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
auto:在需要时剪切内容并添加滚动条。(此为body对象和textarea的默认值)
</div>
<div class="hidden">
hidden:不显示超过对象尺寸的内容。
hidden:不显示超过对象尺寸的内容。
hidden:不显示超过对象尺寸的内容。
hidden:不显示超过对象尺寸的内容。
hidden:不显示超过对象尺寸的内容。
hidden:不显示超过对象尺寸的内容。
hidden:不显示超过对象尺寸的内容。
hidden:不显示超过对象尺寸的内容。
hidden:不显示超过对象尺寸的内容。
hidden:不显示超过对象尺寸的内容。
hidden:不显示超过对象尺寸的内容。
hidden:不显示超过对象尺寸的内容。
hidden:不显示超过对象尺寸的内容。
hidden:不显示超过对象尺寸的内容。
hidden:不显示超过对象尺寸的内容。
hidden:不显示超过对象尺寸的内容。
hidden:不显示超过对象尺寸的内容。
hidden:不显示超过对象尺寸的内容。
hidden:不显示超过对象尺寸的内容。
hidden:不显示超过对象尺寸的内容。
hidden:不显示超过对象尺寸的内容。
hidden:不显示超过对象尺寸的内容。
hidden:不显示超过对象尺寸的内容。
hidden:不显示超过对象尺寸的内容。
hidden:不显示超过对象尺寸的内容。
hidden:不显示超过对象尺寸的内容。
hidden:不显示超过对象尺寸的内容。
hidden:不显示超过对象尺寸的内容。
hidden:不显示超过对象尺寸的内容。
hidden:不显示超过对象尺寸的内容。
hidden:不显示超过对象尺寸的内容。
hidden:不显示超过对象尺寸的内容。
hidden:不显示超过对象尺寸的内容。
hidden:不显示超过对象尺寸的内容。
hidden:不显示超过对象尺寸的内容。
</div>
<div class="scroll">
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
scroll:总是显示滚动条。
</div>
</body>
</html>
效果图:
滤镜filter:filter属性将模糊或颜色偏移等图形效果应用于元素。
语法:
filter: 函数();
如:filter: blur(5px); blur模糊处理,数值越大越模糊。
<!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>CSS3滤镜</title>
<style>
img {
filter: blur(2px);
}
img:hover {
/* 鼠标放在该元素上,将其还原 */
filter: blur(0);
}
</style>
</head>
<body>
<img src="8.image/2.png" alt="">
</body>
</html>
效果图:
calc函数可以在声明CSS属性时执行一些计算。
如:width: calc(100% - 80px);
注:符号(+、-、*、/)两边的空格是必须的。
<!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>calc函数</title>
<style>
.father {
width: 300px;
height: 200px;
background-color: pink;
}
.son {
/* 子盒子永远比父盒子小30px */
width: calc(100% - 30px);
height: 50px;
background-color: blue;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>