首页> 问答大厅> 问答详情

【css】隐藏元素的方法

夏磊银 2020-09-11 WEB前端 157人浏览

隐藏一个元素有多少种方法,分别详细描述

展开问题

5个回答

丁凯

1.display:none;
2.opacity:0;
3.visibility: hidden;
4. 只要看不见,就是隐藏了
position: absolute;
top: -9999px;
left: -9999px;

0 2020-09-11

张凯

1.display:none
真正意义上的隐藏，页面不生成元素，源码中也不显示，不占据空间，对页面布局不起作用，用户交互不可能生效，但是DOM可以访问到这个元素，可以通过DOM操作
2.opacity:0
透明度设置为全透明，在页面中占据空间，对页面布局起作用，会响应用户交互，只是单纯的不可见
3.visibility:hidden
和opacity类似，在页面中占据空间，对页面布局起作用，元素不可见，但是不会响应用户交互
4.position:absolute(fixed)
通过定位，配合top:-9999px;left:-9999px将元素移除可视区域，不会影响布局，不影响用户交互，（避免该元素获取焦点）
5.clip-path
裁剪元素，被裁剪就被会隐藏，隐藏的部分仍然占据空间，对页面布局起作用，元素显示的区域会响应用户交互，隐藏部分不会响应用户交互（IE完全不支持）

回答已被采纳 0 2020-09-11