关于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的相关知识》。