CSS显示隐藏的三种方法

简介: CSS显示隐藏的三种方法

在我们网页开发时,我们通常会使用到显示或隐藏某一个元素,那我们如何实现显示与隐藏呢,让我为大家介绍一下CSS中显示隐藏的方法吧!

基础的样式布局

显示效果 隐藏效果
display:block display:none
visibility:visible visibility:hidden
opacity:1 opacity:0

一、display的block与none属性可以实现显示隐藏

当我们使用display:none时,我们的元素不占原来位置

display:block;除了转换为块元素之外,同时还有显示元素的意思

二、visibility的visited与hidden

visibility属性用于指定一个元素可见还是隐藏

visibility隐藏元素之后,继续占有原来的位置

visibility:visible;元素可视

三、opacity(透明度)

我们使用opacity也可以达到显示与隐藏的效果

直接给opacity设置为0,我们元素的透明度为0时

当我们设置为1时就是元素不透明,默认为1

opacity:1

本人文笔有限,感谢大家的阅读,如有不对的地方可以向我提出,感谢大家!

相关文章
|
7天前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
9 2
|
13天前
|
前端开发 JavaScript
jQuery css() 方法
jQuery css() 方法
15 3
|
27天前
|
前端开发 JavaScript
jQuery css() 方法
jQuery css() 方法
11 1
|
2月前
|
前端开发 容器
css溢出隐藏的五种方法
css溢出隐藏的五种方法
23 1
|
22天前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
21 0
|
2月前
|
前端开发 容器
css溢出隐藏的五种方法
css溢出隐藏的五种方法
|
3月前
|
前端开发 JavaScript 算法
CSS【详解】样式选择器的优先级(含提升优先级的方法)
CSS【详解】样式选择器的优先级(含提升优先级的方法)
85 0
CSS【详解】样式选择器的优先级(含提升优先级的方法)
|
3月前
|
前端开发
css 实用技巧 —— div在div中水平垂直居中(两种方法)
css 实用技巧 —— div在div中水平垂直居中(两种方法)
48 3
|
3月前
|
JavaScript 前端开发 容器
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
109 2
|
3月前
|
前端开发
css 实用技巧 —— 文字和图标垂直居中对齐(四种方法)
css 实用技巧 —— 文字和图标垂直居中对齐(四种方法)
1305 1