1 前言
本质:让一个元素在页面中隐藏或者显示出来
1. display 显示隐藏
2. visibility 显示隐藏
3. overflow 溢出显示隐藏
2 display
display主要属性:
display: none ;隐藏对象
display:block ;除了转换为块级元素之外,同时还有显示元素的意思
注意:
display 隐藏元素后,不再占有原来的位置。
.box {
display: none;
/* display: block; */
width: 200px;
height: 200px;
background-color: red;
}
3 visibility
visibility主要属性:
visibility:visible ; 元素可视
visibility:hidden; 元素隐藏
注意:
visibility 隐藏元素后,继续占有原来的位置。
如果隐藏元素想要原来位置, 就用 visibility:hidden
如果隐藏元素不想要原来位置, 就用 display:none (用处更多)
.box {
visibility: hidden;
width: 200px;
height: 200px;
background-color: red;
}
4 overflow
overflow属性:
.box {
/* overflow: visible; */
/* overflow: hidden; */
/* scroll 溢出的部分显示滚动条 不溢出也显示滚动条 */
/* overflow: scroll; */
/* auto 溢出的时候才显示滚动条 不溢出不显示滚动条 */
/* overflow: auto; */
width: 200px;
height: 200px;
border: 3px solid pink;
margin: 100px auto;
}