本文摘自PHP中文网，作者青灯夜游，侵删。
方法：1、使用“opacity:0;”；2、使用“visibility: hidden;”；3、使用“diaplay:none;”；4、使用“position:absolute;top:-999px;”；5、利用clip-path属性。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
用css隐藏页面元素有许多种方法。
第一种方法：opacity: 0;
opacity属性通常用于设置一个元素的透明度，从另一个角度来看，如果透明度为0，也就从视觉上隐藏了该元素。
这个属性不是为改变元素的边界框（bounding box）而设计的，元素本身依然占据它自己的位置并对网页的布局起作用，它也将响应用户交互。
第二种方法：visibility: hidden;
第二个要说的属性是visibility。
将它的值设为hidden将隐藏我们的元素。
如同opacity属性，被隐藏的元素依然会对我们的网页布局起作用。
与opacity唯一不同的是它不会响应任何用户交互。
此外，设置了该属性之后，元素在读屏软件中会被隐藏。
另外要注意的是，如果一个元素的visibility被设置为hidden之后，却想要显示它的某个子孙元素，只要将那个子孙元素的visibility显式设置为visible即可（样式覆盖）。
第三种方法：diaplay: none;
display属性依照词义才是真正地隐藏了元素。
将display属性设为none就能确保元素不可见并且连盒模型也不生成，使用这个属性，被隐藏的元素不占据任何空间。
不仅如此，一旦display设为none任何对该元素直接打用户交互操作都不可能生效。
此外，读屏软件也不会读到元素的内容，因为这种方式产生的效果就像元素完全不存在。
任何这个元素的子孙元素也会被同时隐藏。
为这个属性添加过度动画是无效的，他的任何不同状态值之间的切换总是会立即生效。
不过请注意，通过DOM依然可以访问到这个元素。因此你可以通过DOM来操作它。
第四种方法：position: absolute;
假设有一个元素你想要与它交互，但是你又不想让它影响你的网页布局，没有合适的属性可以处理这种情况（opacity和visibility影响布局mdisplay不影响布局但又无法直接交互）。
在这种情况下，只能考虑将元素移出可视区域，这个办法既不会影响布局，有可能让元素保持可以操作。
具体是通过将position属性设置为absolute来实现（绝对定位）。
1 2 3 |
|
第五种方法：clip-path
隐藏元素的另一种方法是通过剪裁它们实现，具体是通过clip-path属性，这个属性比较新，浏览器兼容性也会比较差。
1 |
|
但是了解一下还是很必要的。
（学习视频分享：css视频教程）
以上就是css怎么控制元素隐藏的详细内容，更多文章请关注木庄网络博客！
相关阅读 >>
html中图片显示方式-----img与background的区别
更多相关阅读请进入《css》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
