CSS元素的显示和隐藏
CSS元素的显示和隐藏
1.display
display : none; //隐藏元素 ,隐藏元素后,不再占据原先的位置
display: block; //显示隐藏的元素
做一个简单的代码测试,有两个按钮,点击开的按钮,div标签的dispaly属性改为 block,显示出来,点击关的按钮,div标签的dispaly属性改为 none,隐藏出来
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; } body{ background-color: rgba(0, 0, 0, 0.8); } .b1{ width: 150px; height: 30px; margin-top: 100px ; margin-left: 500px; } .b2{ width: 150px; height: 30px; margin-top: 100px ; margin-left: 100px; } div{ /* 隐藏元素 */ display: none; width: 300px; height: 300px; background-color: yellow; border-radius: 50%; margin: 50px auto; } </style> </head> <body> <button class="b1"> 开</button> <button class="b2">关</button> <div></div> <script> var btn01 = document.querySelector(".b1"); var btn02 =document.querySelector(".b2") var div01 = document.querySelector("div") btn01.addEventListener("click",function(){ div01.style.display = "block"; }) btn02.addEventListener("click",function(){ div01.style.display = "none"; }) </script> </body> </html>
2.visibility属性
visibility : visible; //元素可视
visibility : hidden; //元素隐藏,元素隐藏后继续占有原先的位置
元素隐藏前
将第一个div元素隐藏,元素隐藏后,继续占有其位置
3.溢出属性 overflow
overflow 属性指定了 如果内容溢出了元素框(即超过了元素的指定高度和宽度),会发生什么事
(1)overflow : visible; //显示超出的内容
(2)overflow : hidden; //隐藏超出的部分
(3)overflow : scroll; //超出的部分使用滚动条,即使没有超出也会有滚动条
(4)overflow:auto; // 如果右超出的部分,则使用滚动条,如果没有,则不使用
相关推荐
qiupu 2020-11-04
多读书读好书 2020-11-03
RedCode 2020-10-28
jiedinghui 2020-10-25
Ladyseven 2020-10-22
hellowzm 2020-10-12
zuncle 2020-09-28
Ladyseven 2020-09-11
jiedinghui 2020-09-07
xiaohuli 2020-09-02
葉無聞 2020-09-01
impress 2020-08-26
ThikHome 2020-08-24
nicepainkiller 2020-08-20
hellowzm 2020-08-18