display: none
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>显示隐藏-overflow</title>
<style>
.peppa {
/* overflow: visible; */
/* overflow: hidden; */
/* 把溢出的部分隐藏 */
/* overflow: scroll; */
/* 把溢出的部分显示成滚动条 */
overflow: auto;
/* 如果有超出的时则显示出滚动条，否则反 */
width: 200px;
height: 200px;
border: 3px solid skyblue;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="peppa">
《小猪佩奇》，又名《粉红猪小妹》（台湾名为粉红猪），英文名为《Peppa
Pig》，是由英国人阿斯特利（Astley）,贝克（Baker）,戴维斯（Davis）创作、导演和制作的一部
英国学前电视动画片，也是历年来最具有潜力的学前儿童品牌。故事围绕小猪佩奇与家人的愉快经历，幽默
而有趣，籍此宣传传统家庭观念与友情，鼓励小朋友们体验生活。
</div>
</body>
</html>
flowchart TD
A[开始] --> B[选择目标元素]
B --> C[添加点击事件]
C --> D[切换CSS显示隐藏]
D --> E[结束]
<!DOCTYPE html>
<html>
<head>
<title>jQuery设置CSS隐藏元素示例</title>
<script src="
</head>
<body>
<h1>jQuery设置CSS隐藏元素示例</h1>
<button id="hideButton">隐藏</button>
<p id="hiddenParagraph">这是一个隐藏的段落。</p>
<script>
$(document).ready(function () {
$("#hideButton").click(function () {
$("#hiddenParagraph").hide();
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>显示隐藏-display</title>
<style>
.peppa {
/* display: none; */
/* 此时其隐藏 */
display: block;
/* 此时其重新显示 */
width: 200px;
height: 200px;
background-color: skyblue;
}
.george {
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="peppa">佩奇</div>
<div class="george">乔治</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>显示隐藏-visibility</title>
<style>
.baba {
visibility: hidden;
/* 此时其隐藏 */
/* 只是其自动隐藏，下方的盒子不重叠上去 其位置保留 */
width: 200px;
height: 200px;
background-color: skyblue;
}
.mama {
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="baba">a</div>
<div class="mama">b</div>
</body>
</html>
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title>testtitle>
<style type="text/css">
.test1 {
background-color: yellow;
width: 200px;
height: 200px;
}
.test2{
background-color: red;
width: 200px;
height: 200px;
}
style>
head>
<body>
<div class="test1">div>
<div class="test2">div>
body>html> <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
div:first-child {
display: none; 隐藏元素,但不是删除，元素还是存在的，但是元素的位置不保留
/* visibility: hidden;/* 隐藏元素,和display区别在于本方法保留元素的位置(停薪留职) */ */
}
div:nth-child(2) {
display: none;
background-color: purple;
}
div:nth-child(3) {
line-height: 100px;
text-align: center;
margin: 10px auto;
position: relative;
}
div img {
position: absolute;
width: 100px;
right: -110px;
top: 0;
display: none;
}
div:nth-child(3):hover img {
display: block;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div>
显示隐藏测试
<img src="img/1.jpg" />
</div>
</body>
</html>
<div class="kuang">
<input type="password" placeholder=" 请输入密码......" id='password' >
<div class="conceal" id='conceal'></div>
</div>
<div class="kuang">
<input type="password" placeholder=" 请输入密码......" id='password' >
<div class="conceal" id='conceal'></div>
</div>
作者： 王春天· 关于作者： 大连天翼信息科技有限公司 技术总监。 SNF快速开发平台 创始人。应用平台架构师、IT规划咨询专家、业务流程设计专家。 专注于快速开发平台的开发、代码生成器。同时专注于微软平台项目架构、管理和企业解决方案，多年项目开发与管理经验，精通DotNet系列技术Vue、.NetCore、MVC、Webapi、C#、WinForm等，DB（SqlServer、Oracle等）技术，移动端开发。熟悉Java、VB及PB开发语言。在面向对象、面向服务以及数据库领域有一定的造诣。现从事项目实施、开发、架构等工作。并从事用友软件产品U8、U9、PLM 客开工作。 如有问题或建议，请多多赐教！ 本文版权归作者·，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，如有问题，可以通过邮箱或QQ 联系我，非常感谢。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery 显示与隐藏</title>
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
<link rel="stylesheet" type="text/css" href="css/demo.css" />
</head>
<body>
<input class="show" type="button" value="显示" />
<input class="hide" type="button" value="隐藏" />
<div id="box">
</div>
</body>
</html>ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;} <div >
<span ></span>
←SS属性为visibility:hidden的对象
</div><br>
<div >
<span ></span>
←SS属性为display:none的对象
</div>
