网页设计中最常用的标签p、div、h1-h6（默认为块级元素）,span(默认为内联元素)
内联，内嵌，行内属性标签：
1、默认同行可以继续跟同类型标签；
2、内容撑开宽度
3、不支持宽高
4、不支持上下的margin和padding
5、代码换行被解析
块属性标签：
1、默认独占一行显示；
2、没有宽度时，默认撑满一排
3、支持所有css命令
<style type="text/css">
div{ display:inline; background:red;}/*区块元素将转换为内联元素*/
span{ display:block; background:green;}/*将内联元素转换为区块元素*/
</style>
</head>
<body>
<div>我是div块级元素</div>
<span>我是span内联元素</span>
</body>
2、设置元素不可见和设置元素为inline-block()
<style type="text/css">
div{ display:none; background:red;}/*将元素设置为不可见*/
span{ display:inline-block; background:green;}/*还是内联元素 跟inline没什么区别,只有一点区别就是会自动加上一些边距,可以设置宽高*/
h1{ display:inline-block; background:blue;}
</style>
</head>
<body>
<div>我是div块级元素</div>
<span>我是span内联元素</span>
<h1>fasdfsadf</h1>
</body>
inline-block特性：
1、块在一行显示；
2、行内属性标签支持宽高；
3、没有宽度的时候内容撑开宽度
问题：
1、代码换行被解析，也就是每个块之间有空隙，这个空隙大小随着字体的大小而改变；
2、ie6 ie7 不支持块属性标签的inline-block;
<style>
body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px;/* font-family:XX; */}
ol,ul{list-style:none;padding:0;margin:0;}
a{text-decoration:none;}
img{border:none;}
/* 默认样式重置 (css reset) */
span,div{background:blue; width:100px; height:100px; display:inline-block;}
</style>
</head>
<body> <span>区分样式</span>
<span>区分样式</span>
<span>区分样式</span>
<div>块</div> <div>块</div>
<div>块</div>
</body>
<style>
body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px;/* font-family:XX; */}
ol,ul{list-style:none;padding:0;margin:0;}
a{text-decoration:none;}
img{border:none;}
/* 默认样式重置 (css reset) */ .pages{ height:60px; background:#e8e8e8; width:600px; margin:90px auto; text-align:center;}
.pages a{ background:#fff; border:1px solid #cdcdcd;color:#333333; padding:0 8px 0 9px; height:28px; line-height:28px; display:inline-block;}
.pages a:hover{border-color:red;color:red;}
.pages .active{ font-weight:bold; background:#fcf9ea;cursor:text;}
.pages .active:hover{border-color:#cdcdcd;color:#333333;}
</style>
</head>
<body>
<div class="pages">
<a href="#">上一页</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#" class="active">3</a>
<a href="#">4</a>
<a href="#">15</a>
<a href="#">211</a>
<a href="#">255…</a>
<a href="#">下一页</a>
</div>