巧用css属性隐藏HTML元素

最近发现博客园可以自定义博客页样式,就想把多余的侧边栏,footer,博客信息隐藏起来,想到了几种办法,在此总结一下:

---

visibility: hidden;

设置visibility: hidden;但是模块实际还是占版面的,浏览器一样会对齐进行渲染.

opacity:0;

透明度为0同样可以隐藏模块,同visibility一样,通过透明隐藏也是占版面的.

position;

设置

position:absolute:
top:-9999;
left:-9999:

这个大家肯定都能理解,障眼法而已,模块任然需要被浏览器渲染.

display:none;

将 display 属性设为 none 确保元素不可见并且连盒模型也不生成。使用这个属性，被隐藏的元素不占据任何空间。不仅如此，一旦 display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在。
不过js中依然可以同过DOM访问到元素!

常用的方法就这四种,对那些可以注入的页面尽情控制吧~