display和visibility，前者是存在元素可以不佔用空間。後者隱藏是佔位的。前者可以設為none，後者設為hidden。

1、overflow:hidden; 這是防止溢位，也是一種隱藏，只不過是把超出範圍的元素隱藏，這種一般用於文字過多或者圖片特效以及自適應中div沒法設定高度時使用

2、display:none;這就是完全的隱藏了，直接消失，任何對該元素直接的使用者互動操作都不可能生效，被隱藏的元素完全不會佔用空間，彷彿元素完全不存在一樣。

3、利用opacity透明度來隱藏，opacity設定為0，它只是一種視覺隱藏，元素本身依舊佔用它的位置並對網頁的佈局起到作用，它也同樣影響使用者互動。在讀屏軟體中會被識別。

4、position：元素的定位。把position：absolutely；top：-4555px；left：-45545px；top和left設定成足夠大的負數，相當於把元素放到可視區域外，它不會影響佈局，能夠讓元素保持可操作性，在讀屏軟體上可以被識別。

5、visibility：規定元素 是否可見，一般設定為hidden，它可以很好的隱藏，不會影響使用者的互動，在讀屏軟體中不會被識別。

css隱藏元素是網頁編寫常用的方式，根據我的經驗總結了以下幾種css隱藏元素的方法.

opacity

opacity屬性的隱藏方法主要是將元素透明度opacity設定為0，從而在視覺上就隱藏了元素，但是元素本身依然佔據的著原有空間。

瀏覽器支援來說 IE8以以及更早的版本需要使用filter屬性代替，如: filter: Alpha(opacity=80)。

語法: opacity: value|inherit;

value: 透明值。可取值有 0.0 （全透明）和 1.0（不透明）。

inherit：從父元素整合opacity屬性的值。

其規定使用的CSS版本為 CSS3

JavaScript上的opacity使用方法: object.style.opacity=80。

使用示例：

.hide { opacity: 0;}display

display屬性的隱藏方法主要是將元素display值設定為none，將其不可見，連盒子模型也不生成，甚至連也不佔用原有空間，使用該屬性為none時使用者對該元素的操作將不可用。

其規定使用的CSS版本為 CSS1。

JavaScript上的display隱藏時方法: object.style.display="none"。

JavaScript上的display顯示時方法: object.style.display="除none的其他值"

display的屬性值包含有: "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。

使用示例：

.hide { display: none;}

如果使用jQuery對 帶有display: none;的元素進行顯示/隱藏使用: $(".element").show() / $("element").hide();

position

position屬性的隱藏方法主要是將元素定位出可視區域，從而達到隱藏效果。這個屬性定義建立元素佈局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什麼型別。相對定位元素會相對於它在正常流中的預設位置偏移。

該屬性的值包含有: absolute，fixed，releative，static，inherit。

其規定使用的CSS版本為 CSS2。

JavaScript上的absolute隱藏時方法: object.style.position="absolute" ,object.style.top="-99999px",object.style.left="-99999px"。

使用示例：

.hide {

position: absolute;

top: -99999px;

left: -99999px;

}

visibility

visibility屬性的隱藏方法主要是在使用動畫效果時使用，將該值設定為 hidden將隱藏元素及其子孫元素，如，我們需要滑鼠移動到元素後顯示子元素，可在元素 的hover樣式設定 元素（或其子孫元素）的visibility的值 為visible即可。

該屬性的值包含有:visible，hidden，collapse，inherit。

其規定使用的CSS版本為 CSS2。

JavaScript上的absolute隱藏時方法: object.style.visibility="hidden"。

使用示例：

.hide {

visibility: hidden;

}

.show

{

visibility: visible;

}

overflow

overflow屬性的隱藏方法主要是, 使用超出隱藏的方法。

使用示例：

.overflow

{ overflow: hidden;}

1，透過設定display：none

2，input設定type為hidden

3，透過設定層級z-index 使其處於某個div下層來實現隱藏效果