区别:
| display: none | visibility: hidden | opacity: 0 | |
| 页面中 | 不存在 | 存在 | 存在 |
| 重排 | 会 | 不会 | 不会 |
| 重绘 | 会 | 会 | 不一定 |
| 自身绑定事件 | 不触发 | 不触发 | 可触发 |
| transition | 不支持 | 支持 | 支持 |
| 子元素可复原 | 不能 | 能 | 不能 |
| 被遮挡的元素可触发事件 | 能 | 能 | 不能 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS几种隐藏元素的方法大全</title> </head> <style> .w_vis-hid-outer { background-color: steelblue; display: flex; justify-content: flex-start; align-items: center; margin-bottom: 42px; } .w_vis-hid-outer p { line-height: 62px; padding: 0 24px; } .w_l-con { background-color: tomato; } .w_r-con { background-color: yellowgreen; } /* visibility: hidden 设置隐藏 */ .w_now-vis { background-color: brown; margin: 0 12px; /* visibility: hidden; */ } .w_opac-hid-outer { background-color: slategray; display: flex; justify-content: flex-start; align-items: center; padding: 0 12px; margin-bottom: 42px; } .w_opac-hid-outer p { line-height: 62px; padding: 0 24px; } .w_l-opa-con { background-color: snow; } .w_r-opa-con { background-color: tan; } /* opacity: 0 设置隐藏 */ .w_now-opac { background-color: skyblue; margin: 0 12px; /* opacity: 0; */ } .w_posi-hid-outer { background-color: slategray; display: flex; justify-content: flex-start; align-items: center; padding: 0 12px; margin-bottom: 42px; } .w_posi-hid-outer p { line-height: 62px; padding: 0 24px; } .w_l-pos-con { background-color: snow; margin-right: 12px; } .w_r-pos-con { background-color: tan; margin-left: 12px; } /* opacity: 0 设置隐藏 */ .w_now-posi { background-color: skyblue; /* position: absolute; */ /* left: -6666px; */ } .w_disp-hid-outer { background-color: red; display: flex; justify-content: flex-start; align-items: center; padding: 0 12px; margin-bottom: 42px; } .w_disp-hid-outer p { line-height: 62px; padding: 0 24px; } .w_l-dis-con { background-color: #ccc; margin-right: 12px; } .w_r-dis-con { background-color: #212121; margin-left: 12px; color: #FFF; } /* display: none 设置隐藏 */ .w_now-disp { background-color: blueviolet; /* display: none; */ } .w_trans-hid-outer { background-color: darkorange; display: flex; justify-content: flex-start; align-items: center; padding: 0 12px; margin-bottom: 42px; } .w_trans-hid-outer p { line-height: 62px; padding: 0 24px; } .w_l-tran-con { background-color: #ccc; margin-right: 12px; } .w_r-tran-con { background-color: #212121; margin-left: 12px; color: #FFF; } /* transform: scale(0) 设置隐藏 */ .w_now-trans { background-color: blueviolet; /* transform: scale(0); */ } .w_hidd-hid-outer { background-color: darksalmon; display: flex; justify-content: flex-start; align-items: center; padding: 0 12px; margin-bottom: 42px; } .w_hidd-hid-outer p { line-height: 62px; padding: 0 24px; } .w_l-hid-con { background-color: steelblue; margin-right: 12px; } .w_r-hid-con { background-color: #212121; margin-left: 12px; color: #FFF; } /* hidden attribute 设置隐藏 (在 html 元素标签上设置) */ .w_now-hidd { background-color: red; } </style> <body> <div> <!-- visibility: hidden 方法 --> <div> <p>左侧元素 -- 方法 1: visibility: hidden</p> <p>中间 隐藏 元素</p> <p>右侧元素 -- 方法 1: visibility: hidden</p> </div> <!-- opacity: 0 方法--> <div> <p>左侧元素 -- 方法 2: opacity: 0</p> <p>中间 隐藏 元素</p> <p>右侧元素 -- 方法 2: opacity: 0</p> </div> <!-- position: absolute 方法 --> <div> <p>左侧元素 -- 方法 3: position: absolute</p> <p>中间 隐藏 元素</p> <p>右侧元素 -- 方法 3: position: absolute</p> </div> <!-- display: none --> <div> <p>左侧元素 -- 方法 4: display: none</p> <p>中间 隐藏 元素</p> <p>右侧元素 -- 方法 4: display: none</p> </div> <!-- transform: scale(0) --> <div> <p>左侧元素 -- 方法 5: display: none</p> <p>中间 隐藏 元素</p> <p>右侧元素 -- 方法 5: display: none</p> </div> <!-- hidden attribute --> <div> <p>左侧元素 -- 方法 6: hidden attribute</p> <p>中间 隐藏 元素</p> <!-- <p hidden="true">中间 隐藏 元素</p> --> <p>右侧元素 -- 方法 6: hidden attribute</p> </div> </div> </body> </html>
