CSS中的display

转载 2015年11月18日 11:13:18

display:inline--默认。此元素会被显示为内联元素,元素前后没有换行符。 
比如div,它默认是要另外起一行的,用了这个inline,就不换行了。

一、问题描述:

在js中我们有时想动态的控制一个div显示或隐藏或更多的操作,但如果我们style.display=""可能导致没有效果。

看下面一段代码:

复制代码 代码如下:
<style>
 #name
 {
     display:none;
 }
</style>
</head>
<body>
<div id="name" >
My name is smile.
</div>
</body>
</html>
<script>
window.onload=function(){
document.getElementById('name').style.display="";
 alert("test");
}
</script>

css定义了id为name的div为隐藏,而我们在页面加载完成之后用js控制该id显示出来,这样写有错么?
木有错?可是为什么界面上还是空白呢?

二、解决方法:

记得还有一个用法是xxx.style.display="block" 那我们试试吧,
呜呼,竟然显示了!!!

那我们查看一下style.display=""和style.display="block"用法有什么不同吧。
其实,这两个的最大区别是block是块显示的,所以会换行,那么既然就这么点区别,为什么在本例子中一个可以显示,一个不行呢?困扰。
好吧,这个问题先放开,我们先看现在这个问题中我们如何解决,除了用style.display="block"可以解决外,还有另外一种办法就是:

复制代码 代码如下:
<div id="name" style="display:none" >
My name is smile.
</div>
<script>
     document.getElementById('name').style.display="";
</script>

就是把id为name的样式用style这样内置到标签内,这样不管用display=""还是display="block"就都可以正常显示啦!


web页面前台编码时经常用到display:none样式,平常使用时发现有几点特征需要注意 

1、如果在样式文件或页面文件代码中直接用display:none对元素进行了隐藏,载入页面后,在没有通过js设置样式使元素显示的前提下,使用js代码会无法正确获得该元素的一些属性,比如offSetTop,offSetLeft等,返回的值会为0,通过js设置style.display来使元素显示后才能正确获得这些值。

2、使用display:none隐藏的元素不会被百度等搜索网站检索,会影响到网站的SEO,某些情况下可以使用left:-100000px来达到同样效果。

3、如果是通过样式文件或<style>css</style>方式来设置元素的display:none样式,用js设置style.display=""并不能使元素显示,可以使用block或inline等值来代替。通过style="display:none"直接在元素上进行的设置不会有这个问题

4、有些情况下可以使用style.visibility来代替style.display,但是要注意的是style.visibility隐藏元素时会保留元素在页面上所占的空间,而style.display隐藏元素且让出所占页面空间。

二、

display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别:

display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不见也摸不到。

visible:hidden--- 使对象在网页上不可见,但该对象在网页上所占的空间没有改变,通俗来说就是看不见但摸得到。

例子:

<html>
<head>
<title>display:none和visible:hidden的区别</title>
</head>
<body >
<span style="display:none; background-color:Blue">隐藏区域</span><span style=" background-color:Green">显示区域</span><br />
<span style="visibility:hidden; background-color:Blue">隐藏区域</span><span style="background-color:Green">显示区域</span>
</body>
</html>

css display的用法及原理

最近刚刚开始上手写一点静态网页,看到一些源码中的display属性用的蛮多的,但是我也不太理解原理,只是能看懂,要想用的溜,感觉还是得细究一下,所以有了这篇文章。主要来看一下用的比较多的none,bl...
  • qq_20404903
  • qq_20404903
  • 2015年10月10日 00:06
  • 2347

细说CSS中的display属性

相信大部分
  • jl244981288
  • jl244981288
  • 2014年09月25日 21:15
  • 1948

html+css:display:flex属性

Flex 布局教程:语法篇 原博客地址:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 网页布局(layout)是CS...
  • u011300580
  • u011300580
  • 2017年02月20日 12:19
  • 3672

关于:css display run-in

还没有试过这个原文地址:display run-in">关于:css display run-in作者:emlyhchCSS has a value for the display attribute...
  • nzf_001
  • nzf_001
  • 2014年06月06日 11:22
  • 465

CSS中display属性:block、inline和inline-block的区别

设置span的高度和宽度无效,span的margin和padding无效
  • aitangyong
  • aitangyong
  • 2015年02月28日 20:51
  • 3332

CSS中display对布局的影响以及元素display的默认值

看到前端越来越多的mvc框架出现,之前偶尔还看到有OOCSS(面向对象的CSS编程)的文章。所以可以这样理解,前端HTML页面的所有元素(tag),也都可以理解对象。每个对象有自身的属性,以及每个对象...
  • teamlet
  • teamlet
  • 2014年12月19日 11:47
  • 7256

css中display:inline-block属性值的空隙消除

引用:http://www.duidea.com/2012/1129/1606_2.html 你真的了解 inline-block 了吗?本文将带你深入剖析该属性值的前世今生,让你更好的理解...
  • noob_pudding
  • noob_pudding
  • 2014年08月22日 11:25
  • 788

css3 动画中display none

在写移动开发时经常会遇到弹出层动画。默认它是隐藏的none的。但是在这个基础上加动画就麻烦了。 可以把动画写在一个类内,另一个是none类。默认两个都引用 显示时先把none去掉,再去掉动画的那个...
  • starwmx520
  • starwmx520
  • 2016年01月18日 15:43
  • 2647

css display:none和visibility:hidden和visible="false"区别

 如果在div的style中把visibility设为hidden则div隐藏,但是它会占据空白空间,而如果设置成display:none则不占据空白空间; 而visible="false"则div...
  • renpinghao
  • renpinghao
  • 2011年03月28日 10:40
  • 3247

CSS基础学习十四:盒子模型补充之display属性设置

我们在CSS
  • erlian1992
  • erlian1992
  • 2015年11月20日 18:45
  • 3164
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS中的display
举报原因:
原因补充:

(最多只允许输入30个字)