display:none;与visibility:hidden;的区别
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了display:none;与visibility:hidden;的区别,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3814字,纯文字阅读大概需要6分钟。
内容图文
![display:none;与visibility:hidden;的区别](/upload/InfoBanner/zyjiaocheng/415/fd6ebb5df4e549978bc7bf08f52d6f70.jpg)
我当时回答的是,二者均能实现隐藏元素,但是将元素设置为display:none;之后,会同时取消该元素之前占据的文档流空间,但是visibility:hidden;使得该元素即使不显示,但是依旧会占据空间。
当时是电话面试,我回答了之后,对方也没有再继续问与display相关的知识。
现在想起来,真的是庆幸,如果人家问我与display相关的知识,display:inline-block使用时需要注意的地方。我肯定也打不上来。
前几天练习写导航时,由于总需要将一些行内元素或块级元素设置成为行内块级元素,所以我就想到display:inline-block
但是,我发现这是个属性值还是有些学问的。推荐这篇文章。
IE5.5开始,就已经开始支持inline-block,但是要知道IE5.5是在2000年正式推出,但是W3C在2002年才开始将这个属性值加到css2.1草案中。
IE 5.5、6、7 、8(Q)中 块级元素对 inline-block 支持不完整,如果要达到类似的效果,需要先设置为 display:inline,然后使用 zoom:1 等触发
hasLayout
(这个是引起IE浏览器出现bug的原因,我会再详细写的)。IE 5.5、6、7 、8(Q)中 inline 元素欲达到 inline-block 的效果只需直接设置此属性值或使用 zoom:1 等均可。
以下都是针对IE 5.5、6、7 、8(Q)浏览器而言
行内元素 display:inline-block
只需要对行内元素进行display:inline-block,或者zoom:1;就可以触发hasLayout,然后就可以设置该行内元素的宽高。
display:inline-block;*
zoom:1;
在zoom前面加上*
是为了让该属性只针对ie浏览器才被识别。还有其他方法。这里细说块级元素 display:inline-block
块级元素通过display:inline-block触发hasLayout,并不能使得该块级元素具备不换行的特性。这也正是支持不完整的体现,弥补方法:
display:inline; zoom:1;
首先转化为行内元素,然后再使他拥有布局。结合现代浏览器当我们想使得一个元素转换为行内块级元素时,需要做的就是:
`display:inline-block;`/*兼容现代浏览器,IE6、7 行内元素*/ `*display:inline;`/*兼容IE6、7块级元素*/
*zoom:1
;
【另外一个由行内元素引发的问题】就是行内元素之间会有一定的空白边距,这是为什么。
写上一篇笔记时我还不明白,不过看了刚才推荐的那篇博客,我倒是明白了。浏览器渲染行内元素,就仿佛在渲染一个段落里面的字,或者单词,
我们在写hello与buddy之间有一个空格,<p>hello buddy</p>
在写行内元素时,每个行内元素之间都会习惯性的被换行
<span>hello</span> <span>buddy</span>
通常情况下,对于多个连续的空白符(空格,换行符,回车符等),浏览器会将他们合并为一个空白符。
如何去除行内元素之间的空白间隙
对行内元素的父元素使用font-size:0px;
font-size:0px;
除去IE6、7与safri5之前的版本使用这个方法均可以除去行内元素的空白间隙。
对行内元素的父元素进行letter-spacing
这个方法可以除去safri5之前的版本的行内元素之间的空白间隙。
行内元素之间的空白间隙与字体大小有关系,字号越大,其间隙也就越大,letter-spacing 负值的绝对值大于空隙大小后,内部行内元素会发生重叠。letter-spacing:-2px;//这个2px等于元素之间的间隙
对行内元素的父元素进行white-space
font-size:0;/* 所有浏览器 */ letter-spacing:-5px;/* Safari 等不支持字体大小为 0 的浏览器 */ `*letter-spacing:normal;` word-spacing:-1px;/* IE6、7 */
上面的写法基本上兼容了各个浏览器。
需要注意的是,在ie6、7中为了避免letter-spacing与word-spacing之间的冲突,需要 hack 掉 letter-spacing。由于这些文本属性都会继承下去,造成行内元素内部的文字内容受到影响,所以需要为行内元素内部重新设置字体属性值。
font-size: 12px; letter-spacing: normal; word-spacing: normal;
刚才推荐的那篇文章,总结了代码如下:
.dib-wrap修饰行内元素的父级元素,.dib修饰行内元素,另外需要注意由于 inline-block 具有 inline 元素的特性,在垂直方向上很多时候我们并不希望元素以「vertical-align:baseline」方式来呈现,所以在「.dib-wrap」中统一重置为「vertical-align:top」即可.dib-wrap { font-size:0;/* 所有浏览器 */ *word-spacing:-1px;/* IE6、7 */ } .dib-wrap .dib{ font-size: 12px; letter-spacing: normal; word-spacing: normal; vertical-align:top; } @media screen and (-webkit-min-device-pixel-ratio:0){ /* firefox 中 letter-spacing 会导致脱离普通流的元素水平位移 */ .dib-wrap{ letter-spacing:-5px;/* Safari 等不支持字体大小为 0 的浏览器, N 根据父级字体调节*/ } } .dib { display: inline-block; `*display:inline;` `*zoom:1;` }
以上就是display:none;与visibility:hidden;的区别的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的display:none;与visibility:hidden;的区别全部内容,希望文章能够帮你解决display:none;与visibility:hidden;的区别所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。