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（实现隐藏）