使用display：inline-block属性改变元素的显示方式
/* 当display值为inline时，此时为默认值，其元素的宽度和高度都不会改变*/
/* 当display值为inline-block时，此时元素的宽度和高度都会改变大小*/
/* 当display值为block时，此时元素的宽度和高度都会改变，而且还会换行 。*/
实例代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
span{
border:1px solid blue;
background-color:yellow;
width:100px;
height:100px;
padding:5px;
}
.inline{
display:inline;
/* 当display值为inline时，此时为默认值，其元素的宽度和高度都不会改变*/
}
.inline-block{
display:inline-block;
/* 当display值为inline-block时，此时元素的宽度和高度都会改变大小*/
}
.block{
display:block;
/*当display值为block时，此时元素的宽度和高度都会改变，而且还会换行*/
}
</style>
</head>
<body>
<h1>display 属性</h1>
<h2>display:inline</h2>
<div>Shanghai is one of the four direct-administered municipalities of <span class="inline">the People's Republic of China</span>.Welcome<span class="inline">Shanghai</span>!</div>
<h2>display:inline-block</h2>
<div>Shanghai is one of the four direct-administered municipalities of <span class="inline-block">the People's Republic of China</span>.Welcome<span class="inline-block" >Shanghai</span>!</div>
<h2>display:block</h2>
<div>Shanghai is one of the four direct-administered municipalities of <span class="block" >the People's Republic of China</span>.Welcome<span class="block">Shanghai</span>!</div>
</body>
</html>
运行效果：
评论