块的特征 (代表div)
1、默认独占一行默认独占一行
2、没有宽度时，默认撑满一排
3、支持所有css命令
内嵌(内联、行内)的特征（span）
1、同排可以继续跟同类的标签
2、内容撑开宽度
3、不支持宽高
4、不支持上下的margin
5、代码换行被解析
display：block 显示为块
使内联元素具备块属性标签的特性
display：inline 显示为内嵌
使行块属性标签具备内联元素的特性
inline-block的特点
特性：
1、块在一行显示；
2、行内属性标签支持宽高；
3、没有宽度的时候内容撑开宽度
inline-block应用分页的例子
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>分页</title> <style type="text/css"> a{ width: 17px; height: 20px; border: 1px solid #e0e1e2; display:inline-block; text-decoration: none; text-align: center; font: 12px/20px "宋体"; color: #2052a3; } .pageBtn{ width:64px; } a:hover,.active{ background-color: #1f3a87; color: #fff; } </style> </head> <body> <div class="pageBox"> <a href="#" class="pageBtn">上一页</a> <a href="#">1</a> <a href="#">2</a> <a href="#" class="active">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> <a href="#">7</a> <a href="#">8</a> <a href="#" class="pageBtn">下一页</a> </div> </body> </html>
子块浮动，父块没办法包住子类最佳解决方案：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>解决子块浮动，父块没办法包住子类问题</title> <style type="text/css"> .clearfix{ *zoom: 1; } .clearfix:after{ content: ""; display: block; clear: both; } .box{ border: 1px solid red; } .item{ width: 200px; height: 300px; background-color: blanchedalmond; float:left; } </style> </head> <body> <div class="box clearfix"> <div class="item"></div> </div> </body> </html>