display和visibility的用法和区别

大多数人很容易将CSS属性display和visibility混淆，它们看似没有什么不同，其实它们的差别却是很大的。visibility和display两个属性都有隐藏元素的功能。visibility属性所控制的元素虽然不在浏览器里面显示出来，但他在浏览区里是存在的，只是不显示而已。而display属性设置为none，这个元素就变成了一个不显示的元素。

一、Display的属性值

block：

/*表现为一个块级元素（一般情况下独占一行）*/

当display被设置为block(块)时，容器中所有的元素将会被当作一个单独的块，就像<DIV>元素一样，它会在那个点被放入到页面中。(实际上你可以设置<span>的display:block，使其可以像<DIV>一样工作。

inline:

/*表现为一个行级元素（一般情况下不独占一行）*/

将display设置为inline，将使其行为和元素inline一样---即使它是普通的块元素如<DIV>，它也将会被组合成像<span>那样的输出流。

none:

/*元素不可见，并且不为其保留相应的位置*/

最后是display被设置：none,这时元素实际上就从页面中被移走，它下面所在的元素就会被自动跟上填充。

二、Display的使用

1、display默认属性值为块级的元素：

adress,quote,body,xmp,center,col,colgroup,dd,dtr,div,

dl,dt,fieldset,form,hn,hr,iframe,legend,listing,marquee,

menu,ol,p,plaintext,pre,table,td,th,tr,ul

2、display默认属性值为none的元素：

br,frame,nextid,tbody,tfoot,thead

3、li元素的display属性默认值为：list-item

4、其他元素display属性默认值都为inline

三、Display的特性

改变元素的display属性将对周围元素造成的影响有：

1、在属性值设为block的元素后面添加新行

2、从属性值设为inline的元素所在行中删除一行

3、隐藏属性值设为none的元素并且释放该元素在文档中所占的物理空间，对于其他元素来说，相当于该元素不存在，因此，该元素的位置被其他元素顶替

四、visibility的属性值

visibility:visible
/*元素可见，默认值*/

visibility:hidden
/*元素不可见，但仍然为其保留相应的空间*/

visibility:collapse
/*只对table对象起作用，能移除行或列但不会影响表格的布局。如果这个值用在table以外的对象上则表现为hidden。*/

visibility:inherit
/*继承上级元素的visibility值。*/

五、visibility特性

用来确定元素是显示还是隐藏，这用visibility="visible|hidden"来表示，visible表示显示，hidden表示隐藏。当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。

六、由以上可以了解到 Visibility:none 和 Display:hidden 的区别

display:none;

使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;

visibility:hidden;

使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。

七、什么时候使用Visibility或者Display属性？

Visibility和Display属性虽然都可以达到隐藏页面元素的目的，但它们的区别在于如何回应正常文档流。

如果你想隐藏某元素，但在页面上保留该元素的空间的话，你应该使用visibility：hidden。如果你想在隐藏某元素的同时让其它内容填充空白的话应该使用display：none。

在现实中我（作者）更多的倾向于使用display属性（相信这也是大多数人的习惯，bolo注）。当你决定用display：none来隐藏一个元素时，你必须知道其它内容将填充到该元素留下的空白位置，从而改变页面的布局。

八、使用Visibility或者Display属性的注意事项

display:none:

1、JS读取元素属性值

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

2、SEO优化时需要注意

使用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隐藏元素且让出所占页面空间。

visibility:hidden:

如果想让某一段代码在前台不显示，最简单的方法是用css的display:none,这样，下边的内容就自动填补这个空隙。但是在一些特殊的情况下，我们只需要隐藏这个元素，但它的位置不能被占用了，那么，visibility:hidden就可以实现这个要求。

display和visibility的用法和区别相关推荐

CSS隐藏元素的几种方式以及display、visibility、opacity的区别
CSS隐藏元素的方式首先最通用且最易想到的方法肯定是display.visibility和opacity这三种了 display:none 设置元素不可见并且连盒模型也不生成,一般用于不占空间的隐藏 ...
display、visibility和opactity的区别
1.display:none: DOM结构:浏览器不会渲染display属性为none的元素,不占据空间,意思就是页面上没有它的一席之地,你在开发者模式中选不中那个元素. 事件监听:无法进行DOM事件 ...
display、visibility、opacity的区别
我们常设置display:none.visibility:hidden.opacity:0来隐藏元素,但是在实际使用中会有问题 (1)元素隐藏时是否在DOM中存在? display:不占据空间,会导致 ...
CSS Display与Visibility区别和用法
CSS Display与Visibility区别和用法 CSS属性display和visibility容易混淆,visibility和display两个属性都有隐藏元素的功能.visibility属性 ...
display和visibility的区别
display和visibility的区别,在控件中使用: display:none 隐藏后不会占位置下面的元素会跳上来而visibility:hidden隐藏后它还是会将这个位置占着下面的 ...
详解css3中display和visibility的区别
在css3中,display和visibility都具备对元素进行隐藏和显示的功能. display语法 display:none | block /*none表示隐藏 block表示显示*/ vis ...
基础总结（04）-- display:none;visibility:hidden;区别
display:none 1.使元素隐藏,不再占据空间. 2.动态操作时会引起页面回流和重绘,影响性能. 3.子元素也会被隐藏并且添加display:block/visibility:visible无 ...
display:none与visible:hidden的区别
display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就 ...
html隐藏visibility,通过display或visibility来隐藏html元素
有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏,可以通过display或visibility来实现.通过下面的例子了解display和visibility的区别,简单的例子代 ...

display和visibility的用法和区别

display和visibility的用法和区别相关推荐

最新文章

热门文章