Titan笔记

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

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

2020年2月23日 801点热度 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

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

点赞
下一篇 >

文章评论

您需要 登录 之后才可以评论
最新 热点 随机
最新 热点 随机
腾讯Serverless体验,使用TypeScript编写并部署云函数 Go-Proxy-Checker,一款基于Go编写的高性能代理服务器验证工具 Jetbrains(IDEA)免费教育订阅申请指南 Appium移动测试入门指南(二) - Capability 配置 Appium移动测试入门指南(一)- Appium概述 线程类常用方法 - Java并发编程
[杂谈] 什么是递归函数? [源码] Titan留言板 - Titan的第一个开源项目 [数据结构] 二叉树的前序遍历、中序遍历和后序遍历 线程类常用方法 - Java并发编程 Hadoop安装与环境配置入门 [数据结构] 二叉搜索树的CURD(增删改查)操作
分类
  • Android
  • C语言
  • Hadoop
  • Hive
  • Java
  • JavaWeb
  • Linux运维之道
  • Mybatis学习笔记
  • Python
  • SpringCloud
  • Web
  • Web前端
  • Web后端
  • 并发编程
  • 开发工具
  • 数据库
  • 数据结构
  • 杂谈
  • 移动开发
  • 移动测试
  • 诗词歌赋
  • 软件测试
  • 逸笔挥墨
  • 随摘
标签聚合
数据结构 Mybatis学习笔记 JavaWeb Apache-Hive 链式存储 Java Python 二叉树

COPYRIGHT © 2013-2021 Titan. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang

豫ICP备20001822号-1

豫公网安备 41010502004418号