Web前端學習—基礎篇(23)_如何實現元素的隱藏——顯示與隱藏

4.13、顯示與隱藏

如何讓元素隱藏：

方法一：

• opacity屬性

• opacity: 0; 元素透明，占位依然存在（實現隱藏）

• opacity: 1; 元素不透明

方法二：

• display屬性

• display: none; 元素隱藏，不占位（實現隱藏）

• display: block|inline|inline-block; 元素顯示

方法三：

• visibility屬性

• visibility: hidden; 元素隱藏,占位依然存在（實現隱藏）

• visibility: visible; 元素顯示

方法四：

• 設置元素的位置讓其消失（position屬性），用z-index遮蓋（實現隱藏）

方法五：

• overflow:hidden;屬性，將要隱藏的元素移出父元素（實現隱藏）

方法六：

• 將元素的font-size屬性、line-height屬性、width屬性、height屬性都設置為0（實現隱藏）