css隐藏的三種方法

1、使用display:none來隐藏所有内容

display:none可以讓網頁中所有内容不顯示，如代碼、文字、連結、圖檔、div層，是推薦的内容隐藏方式。

值 描述

none 此元素不會被顯示。

block 此元素将顯示為塊級元素，此元素前後會帶有換行符。

inline 預設。此元素會被顯示為内聯元素，元素前後沒有換行符。

run-in 此元素會根據上下文作為塊級元素或内聯元素顯示。

inherit 規定應該從父元素繼承 display 屬性的值。

2、使用visibility:hidden來隐藏内容

visibility:hidden和display:none可以隐藏的内容幾乎一樣，但唯一差別是它雖然隐藏了内容，但被隐藏掉的内容仍舊占據空間，這段隐藏了内容卻保留白間的位置會在網頁中顯示為空白。

值 描述

visible 預設值。元素是可見的。

hidden 元素是不可見的。

collapse 當在表格元素中使用時，此值可删除一行或一列，但是它不會影響表格的布局。被行或列占據的空間會留給其他内容使用。如果此值被用在其他的元素上，會呈現為 “hidden”。

inherit 規定應該從父元素繼承 visibility 屬性的值。

3、使用overflow:hidden隐藏溢出内容

overflow:hidden這種方式可以隐藏掉固定區域外的内容，它可以有效控制顯示區域。但應注意，使用它時需要給它定義寬度和高度，否則會無效。

overflow用法中存在一個分支，overflow-x:hidden和overflow-y:hidden，x是橫向範圍，y是縱向範圍，這兩個屬性經常用在需要隐藏滾動條時。