块的特征 (代表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>
分页 inline-block应用
子块浮动，父块没办法包住子类最佳解决方案：
<!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>
解决子块浮动，父块没办法包住子类问题
时间： 2024-07-28 13:34:09