控制元素隐藏的方式，有display:none、visibility:hidden以及不透明度设置。
一、display:none
被隐藏的元素，在页面中不占位，空出的位置会被相邻的元素占用。
<div id="div0" style="100px; height:100px;background:blue"></div> <div id="div1" style="100px; height:100px;background:green;display:none"></div> <div id="div2" style="200px; height:200px;background:red"></div>
效果图如下：
由图可见，div1即绿色部分空出的位子已被div2占用。
二、visibility:hidden被隐藏的元素，在页面中不显示，但是它仍然占用原来的位置，不会给相邻其他元素机会。
<div id="div0" style="100px; height:100px;background:blue"></div> <div id="div1" style="100px; height:100px;background:green;visibility:hidden"></div> <div id="div2" style="200px; height:200px;background:red"></div>
效果图如下：
由图可见，虽然div1被隐藏，变为不可见状态了，但是其原来占据的位置并未被div2占用。
三、不透明度设置，通过设置元素的透明度也可以达到隐藏元素的目的，其作用和visibility一样。
<div id="div0" style="100px; height:100px;background:blue"></div> <div id="div1" style="100px; height:100px;background:green;opacity:0;filter:alpha(opacity=0)"></div> <div id="div2" style="200px; height:200px;background:red"></div>
效果图：