html文件控制css层隐藏,css如何设置元素不可见？

如何用纯css方式控制一个元素的隐藏，不可见？下面本篇文章就来给大家介绍一些使用CSS让元素不可见的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

HTML代码

hello!

方法1：display：none;div {

display:none;

}

display属性 能将元素真正隐藏，而且隐藏的元素不会占据任何空间，会让人觉得这个元素好像完全不存在。但是该元素是能够被访问到的，可以通过DOM来操作这个元素。

方法2：opacity:0;div {

opacity:0;

}

这个方法是通过给元素设置透明度，从视觉上来隐藏元素的一种方法。元素本身存在，并且占据原有的位置。

方法3：visibility：hidden;div {

visibility：hidden;

}

这个方法和opacity一样，隐藏起来依然能作用于网页布局，但是它和opacity不一样在于它不会响应任何用户交互。

注意：如果一个元素的 visibility 被设置为 hidden，同时想要显示它的某个子孙元素，只要将那个元素的 visibility 显式设置为 visible 即可。

方法4：position属性--绝对定位方式移出可视区域div {

position: absolute;

top: -9999px;

left: -9999px;

}

这个方法是通过将left和top的值设的很大，让元素在我们不可见的区域中去。

方法5：clip-path属性div {

clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);

}

这个方法是通过裁剪元素来实现的，通过为我们提供了一系列的坐标来创建路径也就是我们常常说的X，Y。当创建完一个闭合的路径时，位于路径内部的区域就可见，而路径外的区域就不可见。这样就实现了裁剪效果。我们可以用这个属性来创建各种图形，如圆形，多边形，三角形，椭圆形等等。更多扩展大家可以点击该链接，有实例拓展。