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

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

相关文章
|
12天前
|
JavaScript 前端开发
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
|
12天前
|
前端开发
CSS水平居中与垂直居中的方法
CSS水平居中与垂直居中的方法
|
12天前
|
前端开发
CSS画三角形(三种方法)
CSS画三角形(三种方法)
|
12天前
|
前端开发 计算机视觉 开发者
利用CSS改变图片颜色的100种方法!
利用CSS改变图片颜色的100种方法!
48 1
|
12天前
|
前端开发 JavaScript 开发者
CSS隐藏元素的N种方法,你知道哪一种最适合你?
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
|
12天前
|
前端开发
【专栏】在 create-react-app 中集成 less/sass 预处理器和 react-css-modules 的方法
【4月更文挑战第29天】本文介绍了在 create-react-app 中集成 less/sass 预处理器和 react-css-modules 的方法。首先,通过 `npm` 安装 less 或 sass 依赖,然后修改 `config-overrides.js` 配置文件以支持 less/sass 编译。接着,详细阐述如何使用 less/sass 编写样式。再者,安装 react-css-modules 并配置 webpack,使能样式模块化。最后,展示了如何结合使用 less/sass 和 react-css-modules,以提升前端开发的效率和代码质量。
|
12天前
|
前端开发
css中几种隐藏元素的方法
css中几种隐藏元素的方法
13 0
|
12天前
|
JavaScript 前端开发 iOS开发
js实用方法记录-动态加载css/js
js实用方法记录-动态加载css/js
21 0
|
12天前
|
前端开发
css声明方法
【4月更文挑战第14天】css声明方法
19 6
|
12天前
|
Web App开发 前端开发 开发者
css检查方法
【4月更文挑战第13天】css检查方法
19 2