本文详细介绍了CSS中隐藏元素的六种方法：display:none;、position:absolute、visibility:hidden、opacity：0、width/height为0以及利用div遮挡。其中，display:none;效果卓越，不影响页面性能；visibility:hidden;隐藏元素但占位；position:absolute;通过绝对定位使其不可见；opacity：0使元素透明但仍占位；width/height为0在特定场景下隐藏元素且支持CSS3动画；最后，利用div遮挡则可在保持元素可见性的同时实现隐藏效果。文章还提供了隐藏单选按钮并判断其状态的方法，无需使用JS。
css隐藏元素的几种方法与区别
一：display：none;隐藏不占位 display 除了不能加入 CSS3 动画豪华大餐之外，基本效果卓越，没什么让人诟病的地方。
二：position：absolut;left/top:-99999px;足够大的负值使其不可见
三：visibility：hidden；隐藏占位，不会响应点击事件。
四：opacity：0；严格来说这个并不是隐藏，透明之后它还占据着页面位置，所以在重排的时候还是会被计算消耗性能。
五：width/height为0 而且可以在二级下拉菜单中设置其慢慢打开的效果。相对于 display 来说适用范围太窄，但是好处是能使用 CSS3 动画。
六：拿一个白色div盖住它，或者和背景颜色相同。可以出现回字显现效果；
三四可以隐藏单选按钮，并且不影响功能使用。
不用js,用单选按钮判断当前是否被选中。
转载于:https://www.cnblogs.com/zhrn/p/4500171.html
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
扫一扫
2万+
