块级元素(block-level)
div,h1,h2,h3,h4,h5,h6,p,hr,form,ul,ol,dl,pre,table,li,dt,dd,tr,td,th;
行内元素(inline level)
em,strong,span,a,br,img,button,input,label,select,code,script,textarea;
特性区别：
- 块级元素可以包含块级元素和行内元素，行内元素只能包含文本和行内元素；
- 块级元素可以占据一整行的空间，行内元素只能占据自身宽度的空间；
- 块级元素可以设置宽高，而行内元素设置无效
- 块级元素的display属性值为block;行内元素的display属性值为inline;可以通过修改display属性来切换块级元素和行内元素；
块级元素水平居中效果
对于块级元素，设置margin: 0 auto;可以达到剧中的效果
示例：
.box {
margin: 0 auto;
/*
这个代码,实际上为下面代码的简写
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
*/
}
行内元素水平居中效果
对于行内元素，设置text-align: center可以到达居中效果
但是有个缺点，由于 text-align: center; 是可继承属性，即父元素内部所有元素都会继承这个属性，从而它在元素内部的文本都会居中显示。因此需要对子元素的文本居中样式单独设定
示例：
<style>
.box{
text-align: center;
}
</style>
<div class="box">
<a href="www.google.com" >google</a>
</div>
inline-block 元素水平居中
仅inline-block属性是无法让元素水平居中，他的关键之处要在元素的父容器中设置text-align的属性为“center”，这样才能达到效果
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body{
text-align: center;
}
.tab-ct>li{
display:inline-block;
margin: 0 4px;
}
</style>
</head>
<body>
<ul class="tab-ct">
<li><a class="btn" href="#">项目1</a></li>
<li><a class="btn" href="#">项目2</a></li>
<li><a class="btn" href="#">项目3</a></li>
<li><a class="btn" href="#">项目4</a></li>
</ul>
</body>
</html>
