display属性
在css中如果我们想把块级元素转换成内联元素怎么办，通常我们都用css属性中的display来解决；
语法
display：属性值；
| 属性值 | 说明 |
| block | 块元素 |
| inline | 行内元素 |
| inline-block | 行内块元素 |
| table | 以表格形式出现类似table |
| table-row | 以表格行的形式出现类似tr |
| table-cell | 以表格单元格形式出现类似td |
| none | 隐藏元素 |
inline-block
这个属性的特点是他结合了块元素的特点和行内元素的特点
display:none
display:none我们经常和JavaScript用来动态隐藏元素，经常隐藏的元素比如二级导航、tab选项卡等
使用display:none需要注意的两个地方：
1、"display:none"通常使用JavaScript动态隐藏元素，且不占原来的位置
2、"display:none"隐藏一些对SEO关键的部分，因为搜索引擎会直接忽略隐藏的那一部分
display:none和visibility:hidden的区别
在css中我们隐藏元素通常使用这两个方法，
这两个的区别就是：
display:none隐藏元素后，元素不占原来的位置，就是彻底消失了
visibility:hidden 隐藏元素后，还占原来的位置，也就是看不见但是摸的找
dispaly:table -cell
在css中我们将元素转换成table-cell类型，元素以表格单元格形式呈现，也就是说类似于表格的单元格td的特点
这个属性在IE8+及其他现代浏览器都支持，但IE6、7并不支持，由于现在IE6、7逐渐退出浏览器这块区域，我们还是果断使用"display:table-cell"这一布局神器
display:table-cell非常强大，其布局功能主要分为三种
（1）图片垂直居中与元素
（2）等高布局
（3）自动平均划分元素，并且在一行显示
图片垂直居中于元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table-cell应用</title> <style type="text/css"> div{ width: 150px; height: 150px; display: table-cell; text-align: center; vertical-align: middle; border: 1px solid yellow; } </style> </head> <body> <div><img src="images/q1.jpg"></div> <div><img src="images/q2.jpg"></div> <div><img src="images/q3.jpg"></div> </body> </html>
结果：
分析：图片水平居中我们用"text-align:center"，使图片垂直居中我们使用"display:table-cell"和"vetical-align:middle"配合使用
等高布局
我们知道，同一行的单元格td是同高的，因此table-cell也具有这个特性，我们可以就此实现等高的效果；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table-cell应用</title> <style type="text/css"> div{ width: 150px; height: 150px; display: table-cell; text-align: center; vertical-align: middle; border: 1px solid yellow; } </style> </head> <body> <div><img src="images/q1.jpg"></div> <div><img src="images/q2.jpg"></div> <div><img src="images/q3.jpg"></div> </body> </html>
结果
分析：
我们发现我们并没有定义它们的高度，但它们的高度一致，并且高度由最高的那个决定。这就是自适应高度布局。
它的应用比如我们发动态时候有好友评论，好友评论栏就是使用自适应等高布局。这个布局也是两栏的，左栏是好友头像，右栏是好友评论，因为我们不知道好友评论内容的长度所有不能给它们固定高，只能让它们自适应
。这个技巧非常使用，一定要掌握
自动平均划分元素
如果我们想用ul实现上面的图片，我们可能第一个想到就是用float来实现，但是这样我们就需要精确每一个li的宽度，但是使用display:table-cell;就很快速
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自动平均划分元素</title> <style type="text/css"> ul{ display: table; width: 300px; list-style: none; } li{ height: 60px; display: table-cell; text-align: center; line-height: 60px; color: white; } ul li:nth-child(1){ background-color: red; } ul li:nth-child(2){ background-color: purple; } ul li:nth-child(3){ background-color: yellow; } ul li:nth-child(4){ background-color: blue; } ul li:nth-child(5){ background-color: green; } ul li:nth-child(6){ background-color: black; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </body> </html>
分析：
其中
:nth-child(n)是css3选择器现在所有主流浏览器均支持 :nth-child() 选择器，除了 IE8 及更早的版本。
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
n 可以是数字、关键词或公式。
去除inline-bloc元素的间距
首先看一个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>去除inline-block元素间距</title>
<style type="text/css">
*{padding:0;
margin:0;
}
ul{
list-style: none;
}
li{
display: inline-block;
width: 60px;
height: 60px;
background-color: yellow;
text-align: center;
line-height: 60px;
}
</style>
</head>
<body>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</body>
</html>
结果
在图中，我们看到inline-block是会产生间距的，这个间距是会影响我们的布局，大多数为了不影响布局的情况，我们会去除掉这个间距。在css中我们就使用"font-size:0"来去除
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>去除inline-block元素间距</title> <style type="text/css"> ul{ list-style: none; font-size: 0; } li{ display: inline-block; width: 60px; height: 60px; background-color: yellow; text-align: center; line-height: 60px; font-size: 30px; } </style> </head> <body> <ul> <li>A</li> <li>B</li> <li>C</li> </ul> </body> </html>
结果
注意：这个font-size:0是放在父级的
