Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css] 3.CSS 隐藏元素的几种方法(至少说出三种) #24

Open
qiilee opened this issue Sep 27, 2019 · 2 comments
Open

[css] 3.CSS 隐藏元素的几种方法(至少说出三种) #24

qiilee opened this issue Sep 27, 2019 · 2 comments
Labels

Comments

@qiilee
Copy link
Member

qiilee commented Sep 27, 2019

答案:

Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;

Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外,元素在读屏软件中也会被隐藏;

Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外,读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;

Position:不会影响布局,能让元素保持可以操作;

Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件,浏览器支持度还要低;

@qiilee qiilee added the CSS label Sep 27, 2019
@fanybook
Copy link

z-index 算么

@qiilee
Copy link
Member Author

qiilee commented Sep 27, 2019

应该算的。z-index 属性通过设置元素的堆叠顺序,使其它元素遮盖该元素也算是一种隐藏了。另外,overflow、transform、设置宽高字体等,也可达到隐藏元素效果,谢谢你的提问,后面我会更新答案。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants