Titan笔记

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

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

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

兴趣广泛而无一精擅
想到什么,我总是渴望以代码的方式去呈现
永远年轻,永远热泪盈眶
Stay Hungry, Stay Foolish

点赞
下一篇 >

文章评论

取消回复

Titan

兴趣广泛而无一精擅
想到什么,我总是渴望以代码的方式去呈现
永远年轻,永远热泪盈眶
Stay Hungry, Stay Foolish

逸笔挥墨 - Titan的文学天地
文章分类
  • C语言 (4)
  • Hadoop (1)
  • Hive (3)
  • Java (16)
  • JavaWeb (3)
  • Linux运维之道 (1)
  • Mybatis学习笔记 (3)
  • Python (3)
  • SpringCloud (1)
  • Web (5)
  • Web前端 (4)
  • Web后端 (5)
  • 数据库 (1)
  • 数据结构 (10)
  • 杂谈 (3)
  • 诗词歌赋 (1)
  • 随摘 (2)
最新 热点 随机
最新 热点 随机
关于我和Titan笔记 Spring Cloud 微服务学习笔记 - 开篇 TitanEMS - Titan企业员工管理系统 - JavaWeb期末实践项目 Linux 网络优化指南 - 改善Linux的网络性能 关于Hive使用的一些实例 Apache-Hive 使用MySQL存储Hive的元数据
Spring Cloud 微服务学习笔记 - 开篇TitanEMS - Titan企业员工管理系统 - JavaWeb期末实践项目2021年1月随摘2021年1月诗摘关于我和Titan笔记《梦之浮桥》中的几句
[Python] 关于 asyncio 与 aiohttp 协程并发的探索 Titan商店 - 又一个Web静态项目 (二) 使用Mybatis完成CRUD操作 [杂谈] 什么是递归函数? [Web] CSS 中 Display(显示) 与 Visibility(可见性)的区别与用法 [Java] 日期与时间的一些操作
标签聚合
Mybatis学习笔记 PHP框架 Apache-Hive 数据结构 二叉树 Python 链式存储 Java
友情链接
  • Mttblog

COPYRIGHT © 2016 - 2021 Titan笔记. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS

豫ICP备20001822号-1

豫公网安备 41010502004418号