div和span、relative和absolute、display和visibility是很容易混淆和弄错的HTML标签与CSS属性,今天52CSS.com简单的罗列出它们的区别与使用要点,供大家参考。
一、div和span的区别
div是一个块级元素,可以包含段落,表格等内容,用于放置不同的内容。一般我们在网页通过div来布局定位网页中的每个区块。
span是一个内联元素,没有实际意义,它的存在纯粹是为了应用样式,给一段内容加上标记可以通过在span上定义样式来设定其内容的样式。
二、relative和absolute的区别
relative,CSS中的写法是:position:relative; 他的意思是绝对相对定位,他是参照父级的原始点为原始点,无父级则以BODY的原始点为原始点,配合TRBL进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位。
absolute,CSS中的写法是:position:absolute; 他的意思是绝对定位,他是参照浏览器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由TRBL决定。
三、display和visibility的区别
display:none和visibility:hidden都可以隐藏一个元素
但visibility:hidden只是隐藏了元素的内容,但其使用的位置空间仍然被保留。
而display:none则相当把元素从页面中去除,其占用位置也将被删除。
visibility:可以控制div的显示和隐藏,但是隐藏后页面显示空白。
style="visibility: none;"
document.getElementById("typediv1").style.visibility="hidden"; //隐藏
document.getElementById("typediv1").style.visibility="visible"; //显示
display:可以使div隐藏后释放占用的页面空间。
style="display: none;"
document.getElementById("typediv1").style.display="none"; //隐藏
document.getElementById("typediv1").style.display=""; //显示
分享到:
相关推荐
display与visibility的区别
CSS隐藏元素 display visibility opacity的区别 display:none和visibility:hidden的区别 对比总结: height:0和overflow:hidden的组合
display通常可以设置为none、inline、block visibility通常可以设置为hidden、visible 当display为none,visibility为hidden时,元素都会不见。不过其还有不同之处。 display会将元素隐藏掉,并且位置不再被占据,而...
本文主要介绍了display和visibility的区别。具有很好的参考价值。下面跟着小编一起来看下吧
JS中style.display和style.visibility的区别实例说明.docx
在JS中可以通过设置style.display或者style.visibility属性来控制元素是否显示,在style.display=block和style.visibility=visible的时候,元素被显示,在style.display=none和style.visibility=hidden的时候,元素...
Display的属性值 block...将display设置为inline,将使其行为和元素inline一样—即使它是普通的块元素如<DIV>,它也将会被组合成像<span>那样的输出流。none:/*元素不可见,并且不为其保留相应的位置*/最后是display被
CSS:Visibility和Display属性的比较.pdf
NULL 博文链接:https://johnson-gong.iteye.com/blog/2152336
大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的。 visibility属性用来确定元素是显示还是隐藏的,这用visibility="visible|hidden"来表示(visible表示显示,...
前言: 在使用css隐藏栏位或物件的时候, 常常会使用到display:none和visibility:hidden这两个属性, 但却很容易分不清楚这两个的差别, 或是乾脆同时使用两种属性,来确保物件一定被隐藏, 其实我们可以很简单的来...
visibility属性用来确定元素是显示还是隐藏的,这用visibility="visible|hidden"来表示(visible表示显示,hidden表示隐藏)。
复制代码代码如下:{ display: none; /* 不占据空间,无法点击 */ } { visibility: hidden; /* 占据空间,无法点击 */ } { position: absolute; top: -999em; /* 不占据空间,无法点击 */ } { position: relative; ...
通过下面的例子了解display和visibility的区别,简单的例子代码如下: 复制代码代码如下: <html> <head> <title>HTML元素的显示与隐藏控制</title> [removed] function showAndHidden1(){ ...