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

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

相关文章
|
1月前
|
前端开发
CSS水平居中与垂直居中的方法
CSS水平居中与垂直居中的方法
|
1月前
|
前端开发
CSS画三角形(三种方法)
CSS画三角形(三种方法)
|
1月前
|
前端开发 计算机视觉 开发者
利用CSS改变图片颜色的100种方法!
利用CSS改变图片颜色的100种方法!
35 1
|
2月前
|
前端开发 JavaScript 开发者
CSS隐藏元素的N种方法,你知道哪一种最适合你?
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
|
11天前
|
前端开发
css中几种隐藏元素的方法
css中几种隐藏元素的方法
11 0
|
11天前
|
JavaScript 前端开发 iOS开发
js实用方法记录-动态加载css/js
js实用方法记录-动态加载css/js
16 0
|
4月前
|
缓存 前端开发 JavaScript
CSS提高性能的方法有哪些?
CSS提高性能的方法有哪些?
86 1
|
15天前
|
Web App开发 前端开发 开发者
css检查方法
【4月更文挑战第13天】css检查方法
14 2
|
15天前
|
XML 前端开发 开发者
css的常用方法
【4月更文挑战第13天】css的常用方法
13 3
|
1月前
|
前端开发
CSS清除浮动的八种方法
CSS清除浮动的八种方法