盒类型
在CSS3中使用display属性来定义盒的类型,总体来说盒分为block和inline类型。比如div元素和p元素就属于block类型,span和a属于inline类型。
两者区别如下(以div和span为例):
1.inline-block类型
inline-block盒类型属于block盒的一种,但是在显示时具有inline类型盒的特点
例如:如果在div元素中分别将display设置为inline-block和inline后效果一样
代码及效果如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.div1{
display:inline-block;
background-color: #41db50;
}
.div2{
display:inline;
background-color: #41db50;
}
</style>
</head>
<body>
<div class="div1">div1盒模型</div>
<div class="div2">div2盒模型</div>
</body>
2.利用inline-block执行分列显示
在CSS2.1之前如果需要一行中并列多个元素就需要float等属性,这样会让样式变的复杂,而CSS2.1追加的inline-block能让此变的简单。
若用float属性 代码及效果图如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.div1{
width:100px;
height:100px;
background-color: red;
float:left;
}
.div2{
width: 100px;
height: 100px;
background-color: green;
float:left; }
.div3 {
width: 200px;
height: 200px;
background-color: brown;
clear:both;
float:left;
}
</style>
</head>
<body>
<div class="div1">div1盒模型</div>
<div class="div2">div2盒模型</div>
<div class="div3">div3盒模型</div>
</body>
</html>
若利用inline-block 代码应变为如下:
<style>
.div1{
width:100px;
height:100px;
background-color: red;
display:inline-block;
}
.div2{
width: 100px;
height: 100px;
margin:-5px;
background-color: green;
display:inline-block;
}
.div3 {
width: 200px;
height: 200px;
background-color: brown;
}
</style>