Titan笔记

  • 首页
  • Java
  • 数据结构
  • C语言
  • Web
  • 杂谈
  • 移动开发
  • 逸笔挥墨
Titan笔记
分享学习,研究与开发的点滴记忆
  1. 首页
  2. Web
  3. 正文

[Web] CSS 中 Display(显示) 与 Visibility(可见性)的区别与用法

2020年2月23日 1155点热度 2人点赞 0条评论

定义

在W3School上这两种CSS属性是这样定义的:

1.visibility 属性规定元素是否可见

2.display 属性规定元素应该生成的框的类型。

如果你想隐藏一个元素可以通过把display属性设置为”none”,或把visibility属性设置为"hidden"。但是请注意,这两种方法会产生不同的结果。

  1. visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。
  2. 所以,display:none 使得整个元素包括其占据的空间均隐藏,而visibility:hidden 仅仅会隐藏元素但是仍然会保留元素所占据的区域
  3. 根据具体情况来选择使用,一般来说 display:none 更加常用。

下面是两种方式的示例:

1.Display:None; 方式隐藏与显示元素

这是一个文本段落,点击按钮用Display样式隐藏与显示它
这是另外一个段落

  

2.Visibility方式隐藏与显示元素

这是一个文本段落,点击按钮隐藏与显示它
这是另外一个段落

  

你会不难看出这两种方式的区别和差异。

 

示例的相关代码

<p>1.Display:None; 方式隐藏与显示元素</p>
<div id="displayMethod" style="display: inline;"><strong>这是一个文本段落,点击按钮用Display样式隐藏与显示它</strong>
</div>
<div>这是另外一个段落</div>
<p><button class="btn" type="button" onclick="document.getElementById('displayMethod').style.display='none'">Display隐藏</button><br/>
<button class="btn" type="button" onclick="document.getElementById('displayMethod').style.display='inline'">Display显示</button></p>
<p>2.Visibility方式隐藏与显示元素</p>
<div id="visMethod" style="visibility: visible"><strong>这是一个文本段落,点击按钮隐藏与显示它</strong>
</div>
<div>这是另外一个段落</div>
<p><button class="btn" type="button" onclick="document.getElementById('visMethod').style.visibility='hidden'">Visibility隐藏</button><br/>
<button class="btn" type="button" onclick="document.getElementById('visMethod').style.visibility='visible'">Visibility显示</button></p>

 

 

本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可
标签: CSS CSS入门 CSS教程 HTML
最后更新:2020年2月23日

Titan

不为岁月流逝蹉跎,不为潮流的势头去附和

点赞
下一篇 >

文章评论

您需要 登录 之后才可以评论
最新 热点 随机
最新 热点 随机
Docker配置IPv6容器网络支持 什么是Elastic Stack,ELK的发展历程 K8s中Pod的基本概念 云原生 - 浅谈容器基础与K8S架构设计 腾讯Serverless体验,使用TypeScript编写并部署云函数 Go-Proxy-Checker,一款基于Go编写的高性能代理服务器验证工具
什么是Elastic Stack,ELK的发展历程 如何在Java中处理JSON [数据结构]结构体练习之复数运算 Spring与Mybatis的整合 关于Hive使用的一些实例 [Python] 关于 asyncio 与 aiohttp 协程并发的探索
分类
  • Android
  • C语言
  • Elasticsearch
  • Hadoop
  • Hive
  • Java
  • JavaWeb
  • Kubernetes
  • Linux运维之道
  • Mybatis学习笔记
  • Python
  • SpringCloud
  • Web
  • Web前端
  • Web后端
  • 云原生
  • 并发编程
  • 开发工具
  • 数据库
  • 数据结构
  • 杂谈
  • 移动开发
  • 移动测试
  • 诗词歌赋
  • 软件测试
  • 逸笔挥墨
  • 随摘
标签聚合
链式存储 JavaWeb Mybatis学习笔记 二叉树 Python 数据结构 Apache-Hive Java

COPYRIGHT © 2013-2021 Titan. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang

豫ICP备20001822号-1

豫公网安备 41010502004418号