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引用运用

  • 2007年06月26日 11:20
  • 851B
  • 下载

css display的用法及原理

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

CSS垂直水平居中,display:flex,布局,文字属性的一些零碎

body的height不可少,如body{height:100%},否则子元素会不认,如果子元素的高直接以百分比写的话,会不显示。因为识别不出来。 宽度则不会,因为浏览器的宽度是固定的,高度会滚,...

css3 display:box box-flex 实现未知高度节点相对父级垂直居中

display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。 目前...

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

我们在CSS

再说流性布局 display:flex ,以及看到的其他一些css 细节

流行布局flex的细节1.overflow对a无效,如果一个”a “元素里面容纳了太多的文字,设定overflow:hidden是没有用的,文字还是会溢出。 哪怕设置了display:block, ...

CSS BOX类型和display属性

BOX类型会影响呈现和布局, 基本的BOX类型有两种: 块级(block-level)和行内级(inline-level). 事实上还有其他类型的BOX(如table, list-item等), 不过...

基于CSS属性display:table的表格布局的使用

基于Display Table实现的表格布局实现 网上调查返现CSS display:table实现的table表格,没有单元格的属性和样式,经过一番思考,曲折现实了单元格的合并,即采用正行嵌套一个单...
  • ale2012
  • ale2012
  • 2016年03月23日 02:36
  • 630

Web前端面试指导(十五):CSS样式-display有哪些作用?

题目点评 其实就是要你说清楚该属性有哪些值,每个值都有什么作用,这个题目可以答得很简单,但要答全也并非是一件容易的事情。 元素默认的display值的情况如下  block(块级元素)  、 ...
  • lxcao
  • lxcao
  • 2016年09月26日 19:51
  • 1564

CSS display 属性详解

display的所有属性 {/* CSS 1 */ display: none; display: inline; display: block; display: list-item; /* CS...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS中的display
举报原因:
原因补充:

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