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 提高性能的方法
【10月更文挑战第24天】在实际应用中,还需要根据具体项目的特点和需求,灵活选择和组合这些方法,不断进行优化和改进。同时,随着技术的不断发展,也需要持续关注新的性能优化技巧和最佳实践,以保持在性能优化方面的领先地位。你对 CSS 性能优化还有哪些深入的思考和经验呢?欢迎进一步交流和分享。
|
1月前
|
前端开发
css页面顶部底部固定,中间自适应几种方法
【10月更文挑战第22天】css页面顶部底部固定,中间自适应几种方法
|
2月前
|
前端开发 容器
CSS 中几种常用的换行方法
CSS 中几种常用的换行方法
33 1
|
3月前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
18 2
|
3月前
|
前端开发 JavaScript
jQuery css() 方法
jQuery css() 方法
21 3
|
2月前
|
前端开发 UED
css性能优化的方法
css性能优化的方法
27 0
|
2月前
|
前端开发
CSS绘制三角形的方法
CSS绘制三角形的方法
|
3月前
|
前端开发 JavaScript
jQuery css() 方法
jQuery css() 方法
20 1
|
4月前
|
前端开发 容器
css溢出隐藏的五种方法
css溢出隐藏的五种方法
49 1
|
3月前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
34 0