在浏览论坛的时候,看到有朋友在面试的时候被问了有几种方法实现让一个div隐藏,下面来总结一下:
- display:none;
该属性会完全隐藏元素,并不会占据页面空间
- visibility:hidden;
该属性仅仅是隐藏元素,但会占据页面空间
display:none和visibility:hidden的区别是：
display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；
使用visibility:hidden比display:none性能上要好，display:none切换显示时，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。
总结:轮播图页面渲染时使用visibility:hidden,这样在渲染第二个tab时还是能够获得自适应宽度,如果采取display:none那么宽高为0
扫描二维码关注公众号，回复：
4314949 查看本文章
- background-color:transparent;或者设成与背景一样的颜色即可
该属性就是把背景色设置为透明或者与原来背景色相同,但是这样的属性如果该div设置了宽高,仍然占据位置
- opacity来设置不透明级别，注意兼容性filter(滤镜)
0.0 （完全透明）到 1.0（完全不透明）
- 给div一个margin负值，这个负值恰好等于div自身的高度或宽度
- 设置两个大小一样的div，第一个左浮动，第二个不浮动，即可将第二个div隐藏
原理:浮动脱离正常文档流,第一个会将第二个覆盖,但并不表示第二个就消失了,知识覆盖了而已,如果第一个div比第二个小,那么第二个还是会显示的
- 设置一个父div和一个子div，子div绝对定位，父div相对定位，子div的left就是子div的宽度
道理同5
8.给父div1设置一个固定的宽度，给子div2设置的宽度远大于父div，并给父div1设置overflow:hidden,并给子div设置margin值即在父div1中没被隐藏的剩余宽度，代码如下：
#div1{width:100px;height:200px;overflow:hidden;}
#div2{width:200px;height:200px;background:green;margin-left:100px;}
9.将div的宽度和高度设置为0
上面是几种思路,并不代表能实现的全部方法,事在人为呢~