元素隐藏
2019-01-11 本文已影响0人
让思念入土
Image 11.png
三种方式：
1、display：none
完全隐藏元素，在标准流中不占位置
Image 12.png
2、visibility：hidden
完全隐藏元素，在标准流中占位置
Image 13.png
3、overflow：hidden
超出元素的内容隐藏，scroll、auto设置盒子滚动条
Image 14.png
Image 15.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三种方式</title>
<style>
.box1,
.box2,
.box3 {
float: left;
width: 200px;
height: 200px;
}
.box1 {
background-color: pink;
}
.box2 {
/*1、隐藏：不占位置 display: block 是显示*/
/*display: none;*/
/*2、hidden 显示与隐藏
不占位置
visib 显示*/
/*visibility: hidden;*/
/*visibility: visible;*/
background-color: skyblue;
}
.box3 {
/*3、溢出隐藏 超出盒子大小的部分 隐藏*/
overflow: hidden;
background-color: orange;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3">
我要带你去浪漫的土耳其。
我要带你去网吧偷耳机。
我要带你去浪漫的土耳其。
我要带你去网吧偷耳机。
我要带你去浪漫的土耳其。
我要带你去网吧偷耳机。
我要带你去网吧偷耳机。
我要带你去网吧偷耳机。
我要带你去浪漫的土耳其。
我要带你去网吧偷耳机。
我要带你去浪漫的土耳其。
我要带你去网吧偷耳机。
我要带你去浪漫的土耳其。
我要带你去网吧偷耳机。
我要带你去网吧偷耳机。
我要带你去网吧偷耳机。
</div>
</body>
</html>
