- 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; // 如果右超出的部分, 则使用滚动条, 如果没有, 则不使用
来源: http://www.bubuko.com/infodetail-3518998.html