细说display属性

display属性常用取值如下：

1. inline—————-行内元素
2. block—————-块元素
3. inline-block———行内块元素
4. table—————-以表格形式显示，类似于table元素
5. table-row———–以表格形式显示，类似于tr元素
6. table-cell———–以表格单元格形式显示，类似于td元素
7. none—————-隐藏元素

除了上面这些，display还有list-item，run-in，compact等属性值，不过这些属性值极少用到，我们就暂时不去研究。

1.block元素
block元素有以下几个特点：

1. 独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素。
2. 块元素内部可以容纳其他块元素或行内元素。
3. 可以定义宽度(width)，也可以定义高度(height).
4. 可以定义四个方向的margin。

2.inline元素
inline元素有以下几个特点：

1. 可以与其他行内元素位于同一行
2. 行内元素内部可以容纳其他行内元素，但是不可以容纳块元素，首先这不符合w3c规范，其次有可能出现不可预知的后果，虽然有时候为了图方便这样做并不会有什么不好的后果。
3. 无法定义高度(height)和宽度(width)。
4. 可以定义margin-left和margin-right，无法定义margin-top和margin-bottom

3.inline-block元素
在css中，我们可以使用“display：inline-block”来将元素转换为行内块元素，行内块元素具有以下两个特点：

1. 可以定义width和height
2. 可以与其他行内元素位于同一行。

也就是说inline-block元素既具备块元素的特点，也具备行内元素的特点，在html中，常见的inline-block元素有两个：img元素和input元素，对于这两个inline-block元素，一定要牢记于心。

浏览器中效果：
在实际开发中，我们可能经常需要给span等行内元素定义width和height，这时候我们就应该考虑到“display：inline-block”,同时，大家可能会发现inline-block元素之间居然有间隙，然而我们的代码中并没有写，关于这个问题，我们以后再来讨论。
此外对于块元素，IE6/IE7不能识别“display：inline-block”，加不加“display：inline-block”对它们完全没有影响。解决方法是：在IE6/IE7下用“display：inline；*zoom：1；”来代替“display：inline-block”，对于行内元素，比如a，span元素，display：inline-block不存在兼容性问题，可以放心使用。

4.display：none
在css中，我们可以使用“display:none”来隐藏元素，display：none用得很多，比如二级导航，tab选项卡等，地方都能用到，不过一般情况下，“display：none”都是配合javascript来动态隐藏元素。
对于display：none我们要注意以下两点：

1. “display：none”一般用于javascript动态隐藏元素，被隐藏元素不占据原来的位置
2. “display：none”不推荐用力啊隐藏一些对seo关键的部分，因为对于搜索引擎来说，它会直接忽略“display：none”隐藏的内容，不把这部分内容加入权重考虑。

举例：

当我们为第二个元素添加“display：none”以后效果如图：

下面我们来看看display：none和visibility：hidden的区别
同样是上面的demo，我们把第二个div的display：none换成visibility：hidden来看看，浏览器中显示效果如下

由demo我们可以发现两者的区别在于，display：none元素被隐藏后，并不会占据原来的位置，而visibility：hidden元素被隐藏后，元素原来的位置被保留。

5.display：table-cell
在CSS中，“display：table-cell”可以让元素以表格单元格的形式呈现，也就是说table-cell类型的元素具备td元素的特点。
不过此属性只有IE8及IE8以上的浏览器支持，IE6/7不支持display：table-cell。考虑到IE6/7的使用率已经很低，我们还是果断使用这一布局神器。
display：table-cell可以实现以下三个功能。
（1）图片垂直居中与元素
（2）自适应等高布局
（3）自动平均划分元素，并且在一行显示。

（1）图片垂直居中与元素
在CSS中，我们可以使用“display：table-cell”和“vertical-align：middle”来实现大小不固定的图片的垂直居中效果，但是这种方法有个问题，就是图片的width和height都必须小于表格的width和height的大小。
语法如下：
举例：

效果如下：

(2)自适应等高布局
我们知道，同一行的单元格td元素高度是相等的，因此，table-cell元素也具备这个特点。根据这个特点，我们可以实现等高布局效果。

效果如下：
在这个例子中，左右两个盒子我们都没有设置宽度，而是由内容撑开，但是我们会发现两个盒子的高度相等，并且高度由两个盒子的最大值决定，这就是自适应的等高布局。
大家可能就会问了，这种等高布局有什么用，其实等高布局的用途非常广泛，比如，我们每天都看的QQ空间的评论区就是用的等高布局。

上面这种布局是两栏的，左栏只有一个头像，右栏是内容，如果布局时采用给左右两栏设置固定高度的话，如果内容区内容过多超过盒子高度就会出现错误，这时候采用等高的自适应布局就可以完美解决。大家一定要掌握这个技巧。

（3）自动平均划分元素
如果我们想要用ul来实现下面这种布局，一般都会使用float来实现，并且还得精确计算每一个li的宽度，但如果给每一个li元素都定义“display：table-cell”，我们就不用如此麻烦。而且还会精确得自动划分每一个li的宽度，并且在一行显示。

语法如下：
源代码如下：

只要改变ul的宽度就会重新平均划分每个li的宽度。