display属性
块元素、行内元素、行内块元素
块元素（block）特点：
- 块元素独占一行，排斥其他元素（包括块元素和行内元素）与其位于同一行。
- 块元素内部可以容纳其他块元素和行内元素。
- 可以定义width，也可以定义height。
- 可以定义4个方向的margin。
行内元素（inline）特点：
- 行内元素可以与其他行内元素位于同一行。
- 行内元素内部可以容纳其他行内元素，但不可以容纳块元素。
- 无法定义height，也无法定义width。
- 可以定义margin-left和margin-right，无法定义margin-top和margin-bottom。
行内块元素（inline-block）特点：
同时具备了block元素和inline元素的特点。
在HTML5中，最典型的inline-block元素有两个：img和input。
display:none
对于display:none，我们需要注意以下两点：
- display:none元素一般用来配合JavaScript动态隐藏元素，被隐藏的元素不占据原来的位置。
- display:none不推荐用来隐藏一些对SEO关键的部分，因为对于搜索引擎而言，它不会将display:none隐藏的内容加入权重考虑。
display:none和visibility:none的区别
虽然两种方式都可以隐藏元素，但二者之间有本质的区别：
- display:none：元素被隐藏后，不占据原来的位置。
- visibility:none：元素被隐藏后，依然占据原来的位置。
display:table-cell
display:table-cell可以让元素以表格单元格的形式呈现。换句话说，就是table-cell类型元素具有td元素的特点。
常见用途有以下三种：
- 图片垂直居中于元素
- 等高布局
- 自动平均划分元素
图片垂直居中于元素
我们可以配合使用display:table-cell和vertical-align: middle来实现大小不固定的图片的垂直居中效果。
（图片的水平居中可以使用text-align:center来实现)
/* 父元素 */
{
display: table-cell;
vertical-align: middle;
}
/* 子元素 */
{
vertical-align: middle;
}等高布局
我们知道，同一行的单元格td元素高度是相等的，因此，table-cell元素也具备这个特点。根据这个特点，我们可以实现等高布局效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<style type="text/css">
/* 定义父元素具备的特点 */
#wrapper{
display: table-row;
}
#img-box{
display: table-cell;
/* 垂直居中 */
vertical-align: center;
/* 水平居中 */
text-align: center;
width: 100px;
height: 100px;
}
#text-box{
display: table-cell;
width: 200px;
height: 100px;
}
</style>
<script>
</script>
</head>
<body>
<div id="wrapper">
<div id="img-box">
<img src="http://www.cxy521.com/static/img/index/image/baidu_favicon.ico" alt="" class="img" />
</div>
<div id="text-box">
<span>baidu</span>
</div>
</div>
</body>
</html>自动平均划分元素
可以为每一个li元素定义display:table-cell，它会自动平均划分元素，并且使得它们在同一行显示。
/* 父元素 */
{
display: table;
}
/* 子元素 */
{
display: table-cell;
}然后为父元素定义一定的宽度，那么此时子元素的宽度就会根据子元素的个数自动平均划分。
inline-block元素间距
inline-block元素之间有一定的间距。在实际开发中，这种间距有时会对我们的布局产生影响。大多数时候我们需要去除inline-block元素的间距。
在CSS中，我们可以为父元素定义一个"font-size:0;"来去除inline-block元素的间距。
/* 父元素 */
{
font-size:0;
}注意：因为父元素使用了font-size:0，所以子元素如果有文字需要定义自身的font-size，不然会因为继承而看不到文字。
