css隐藏元素的几种方法与区别

时间:2023-03-09 06:34:05
css隐藏元素的几种方法与区别

css隐藏元素的几种方法与区别

一:display:none;隐藏不占位 display 除了不能加入 CSS3 动画豪华大餐之外,基本效果卓越,没什么让人诟病的地方。

二:position:absolut;left/top:-99999px;足够大的负值使其不可见

三:visibility:hidden;隐藏占位,不会响应点击事件。

四:opacity:0;严格来说这个并不是隐藏,透明之后它还占据着页面位置,所以在重排的时候还是会被计算消耗性能。
五:width/height为0 而且可以在二级下拉菜单中设置其慢慢打开的效果。相对于 display 来说适用范围太窄,但是好处是能使用 CSS3 动画。
六:拿一个白色div盖住它,或者和背景颜色相同。可以出现回字显现效果;

三四可以隐藏单选按钮,并且不影响功能使用。

不用js,用单选按钮判断当前是否被选中。