display的属性和visibility的对比

标签: javascript
4人阅读 评论(0) 收藏 举报
分类:

display的属性和visibility的对比

display的属性可以有block, inline, none.

display的block属性

block属性表示标签会占用整行,相邻两个block标签会自动换行。使用block的标签有
- div
- h1 - h6
- p
- form
- header
- footer
- section

display的inline属性

inline属性不会单独占用整行,而且只会使用必须的宽度。使用inline的标签有
- span
- a
- img

display的none属性

display的none属性常用在和js合用隐藏标签内容,或展现标签内容,页面不用重新创建标签。一般script标签默认使用的display=none属性

display=none和visibility=hidden的对比

display=none不用占用标签位置,而visibility=hidden会留有标签位置。

使用函数控制隐藏元素

function hide(e, reflow) {
    if (reflow) {
        e.style.display = "none";   // 将e隐藏,所占控件也隐藏
    } else {
        e.style.visibility = "hidden"; // 将e隐藏,保留所占空间
    }
}
查看评论

一段代码弄清楚CSS属性display和visibility的差别,以及dom元素可见的条件

display:none,元素实际上就从页面中移走了,它后面的元素就会自动上移;visibility:hidden,则仅仅隐藏该元素,它占据的页面空间依然存在。综上:一个元素如果可见,必须满足3个条件...
  • aitangyong
  • aitangyong
  • 2015-01-29 17:33:11
  • 2266

新手注意不到的display和visibility属性差别

由于一直自学,对display仅仅停留在会用的阶段。学习过程中发现了visibility属性和display属性效果似乎一致。于是便查阅一些资料,写一些小总结。方便新手朋友已经我自己查阅,并深入理解属...
  • lihchweb
  • lihchweb
  • 2016-11-29 18:02:05
  • 906

opacity、visibility、display对比分析

说明问题: 一个下拉菜单,结构如下, 菜单一 菜单二 菜单三 鼠标移入div,显示菜单ul,移出后隐藏菜单ul,只使用CSS,如何...
  • FE_dev
  • FE_dev
  • 2017-05-22 18:14:02
  • 282

深入理解js中的display:none和visibility属性

1.用javascript隐藏控件的方式有两种:分别设置控件的style的“display”属性和“visibility”属性。当style.display="block"或者style.visibi...
  • jiangtao7913
  • jiangtao7913
  • 2015-12-22 22:09:48
  • 818

transition/animation与visibility/display

①transition是支持visibility这个属性的; ②visibility: 离散步骤,在0到1数字范围之内,0表示“隐藏”,1表示完全“显示”;所以产生上述2S后消失但是无渐变的效果。 此...
  • screaming_color
  • screaming_color
  • 2016-07-09 17:15:08
  • 439

跟着w3c标准来探讨display:none;与visibility:hidden;的区别

①display:none;导致应用到的元素不会出现在格式化结构中,也就是说并不会被加载渲染到页面里,就好像这个元素不存在(render树上当然不会有,但是dom树上元素还是存在的,要不然怎么会响应事...
  • screaming_color
  • screaming_color
  • 2016-07-09 00:08:45
  • 900

display:none与visibility:hidden的区别

display:none和visibility:hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通...
  • u014520797
  • u014520797
  • 2016-03-21 11:26:44
  • 1606

js:div元素display属性与visibility属性的区别

window.onload = function() {             document.getElementById('btnHide').onclick = function() { ...
  • u012572301
  • u012572301
  • 2014-06-05 22:16:53
  • 493

CSS中visibility,opacity和display:none的区别

如何让html的某个元素隐藏,我们一般有三种方式:display:none, opacity:0, visibility:hidden。但这三种方式有何区别?     1. display:non...
  • zhoulu001
  • zhoulu001
  • 2016-10-24 22:46:27
  • 958

JS中的style对象中的display属性和visibility属性的区别

 一、 display属性的常用属性值有两个,分别为            1、none: 隐藏,不占位,空件之间重新定位       2、block: 显示二、  visibility属性的常用属性...
  • mcy478643968
  • mcy478643968
  • 2008-12-17 10:06:00
  • 11166
    个人资料
    持之以恒
    等级:
    访问量: 2万+
    积分: 700
    排名: 7万+
    博客专栏
    最新评论