关于display的那些事儿!
关于display的那些事儿!
display,display,display!嘿嘿嘿!display这一CSS属性,还是相当神奇的哦!给它设置不同的值,被修饰的标签相应的就随之变换了自身的属性特性,具有变色龙特性,该怎么适应,就怎么变!我们常常会用到display对应值有block、none、inline等等!OK!那下面,我就来聊聊关于display的那些事儿吧!
display有哪些比较常用的值呢?
欲知其所以然,则必先知其然!在通常的项目开发中比较容易被使用的值主要有:
none(元素不会被显示);
block(元素将显示为块级元素,元素前后会带有换行符);
inline(元素会被显示为内联元素,元素前后没有换行符);
inline-block(行内块元素。CSS2.1 新增的值);
table(元素会作为块级表格来显示,类似 <table>,表格前后带有换行符);
table-row(元素会作为一个表格行显示,类似 <tr>);
table-cell(元素会作为一个表格单元格显示,类似 <td> 和 <th>)。
有所区别的display="none"和visibility="hidden"?
一眼看去,他们都是元素隐藏的意思;没错,它们确实是元素隐藏哦!但是,它们还是有所区别的啦!
visibility="hidden"表示(仅)隐藏,不可恢复。当visibility被设置为"hidden"的时候,元素虽然被隐藏了,仍然占据它原来所在的位置。visibility会保留元素的位置。元素被隐藏之后,就不能再接收到其它事件了,也不能再接收响应到事件了,因此也就无法通过JS令其显示出来。
display="none"隐藏(元素消失),可恢复。当display被设置为"none"的时候,除了元素隐藏之外,与visibility="hidden"完全相反。
display与visibility的属性值的设置,还有回流与重绘上的区别哦!想了解回流与重绘详情请点击:《页面回流与页面重绘》
jQuery 与 zepto 中dispaly:none的区别?
dispaly:none在jQuery 与 zepto 中的区别!想必大部分初学者还是不了解的吧!想了解jQuery 与 zepto 中dispaly:none的区别,嘿嘿,那就点击:《jQuery 与 zepto 中dispaly:none的区别》
display实现的水平垂直居中!
利用position和margin进行元素水平垂直居中;想必大家还是比较熟悉,经常用的。但不知道你是否使用过display:table与table-cell对元素进行水平垂直居中呢?如果你还没有体验过,那就点击:《CSS实现水平垂直居中对齐》,其中的第五、六种方法,将为你解答!
行内元素与块元素的转化!
在实际的项目开发中总是会遇到块元素要转化为行内元素,或行内元素要转化为块元素,更或者将某元素转化为行内块元素,让其具有相应元素的属性特征,从而更方便、简洁的实现某一效果或达到某一目的。然而,这些元素之间的性质变化,就是通过设置display不同值来实现的哦。
通过设置after伪元素的display="block"清浮动!
清浮动,在项目开发中,似乎是不可避免的。最实用的清浮动,毫无疑问的是使用after元素了吧。当然啦!要知道为什么要清浮动,那就必须首先知道什么是浮动啦!如果你对如何清浮动不太了解,可以通过:《如何清除浮动》进行全面了解!说到浮动,大家一定要注意,当元素设置了display="block"或者元素本身就具有display="block"的特性时,在IE6下会出现横向双倍外边距的BUG。那此时该怎么设置display的值呢?很简单,直接设置display的值为inline,即可轻松避开此BUG了。不信你可以亲自动手试一试哦!
position与float对display的影响!
我们粗略一看,似乎它们不存在任何关系!但是大家可别忘了,position="absolute|fixed"与float会使元素脱离文档流,使得行内元素可以设置宽高,块元素不再占整行了。所以很明显display已经受到一定的影响,此时不管你是设置display="block",还是display="inline",结果还是一样的(撇开(IE6下 双倍外边距BUG))。如果您想了解一下有关定位相关知识,你可以点击:《关于定位position的相关知识》。