元素的显示与隐藏
类似网站广告,当我们点击就不见了,但是重新刷新页面,会重新出现。
本质:让一个元素在页面中隐藏或者显示出来。
常用的三种方法:display、visibility、overflow
1.display属性:
display属性用于设置一个元素如何显示
参数:
none:隐藏对象;
block:除了转换为块级元素之外,同时还有显示元素的意思;
display隐藏元素后,不在占有原来的位置。
后面应用及其广泛,搭配JS可以做很多网页特效。
<style>
.peppa {
width: 100px;
height: 100px;
background-color: pink;
display: none;
}
.george {
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="peppa">佩奇</div>
<div class="george">乔治</div>
</body>
2.visibility属性:
visibility属性用于指定一个元素应可见还是隐藏。
参数:
visible:元素可见;
hidden:元素隐藏。
注意:
visibility隐藏元素后,继续占有原来的位置。
如果隐藏元素想要原来的位置,就用visibility:hidden;
如果隐藏元素不想要原来的位置,就用display:none(用处更多)。
<style>
.bb {
width: 100px;
height: 100px;
background-color: skyblue;
visibility: hidden;
}
.mm {
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="bb">猪爸爸</div>
<div class="mm">猪妈妈</div>
</body>
3.overflow属性:
overflow溢出:
overflow属性指定了如果内容溢出一个元素的框(超过其指定高度及宽度)时,会发生什么。
参数:
visible:不剪切内容也不添加滚动条
hidden:不显示超过对象尺寸的内容,超出的部分隐藏掉;
scroll:不管超出内容否,总是显示滚动条;
auto:超出自动显示滚动条,不超出不显示滚动条;
注意:
一般情况下,我们都不想要溢出内容显示出来,因为溢出的部分会影响布局;
但是如果有定位的盒子,请慎用overflow:hidden,因为它会隐藏多余的部分。
<style>
.peppa {
/* overflow: visible; */
/* overflow: hidden; */
/* overflow: scroll;*//*滚动条 */
overflow: auto;
width: 200px;
height: 200px;
border: 3px solid pink;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="peppa">
《小猪佩奇》,又名《粉红猪小妹》(台湾名为粉红猪),英文名为《Peppa
Pig》,是由英国人阿斯特利(Astley)、贝克(Baker)、戴维斯(Davis)创作、导演和制作的一部英国学前电视动画片,也是历年来最具潜力的学前儿童品牌。故事围绕小猪佩奇与家人的愉快经历,幽默而有趣,借此宣扬传统家庭观念与友情,鼓励小朋友们体验生活。
</div>
</body>
总结:
1.display显示隐藏元素,但是不保留位置;
2.visibility显示隐藏元素,但是保留原来的位置;
3.overflow 溢出显示隐藏,但是只对于溢出的部分处理。