inline-block
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
span{
width:400px;
height: 400px;
background-color: red;
}
</style>
</head>
<body>
<span>span1</span>
<span>span2</span>
<span>span3</span>
<!--
内联元素的特征
1、宽高由内容撑开
2、不支持宽高
3、一行上可以显示继续跟同类的标签
4、不支持上下的margin
5、代码换行被解析
-->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
height: 400px;
background-color: red;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<!--
块元素的特征
1、在没有设置宽度的时候，默认撑满一行。
2、默认块元素独占一行
3、支持所有css命令
-->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div, span{
height: 400px;
background-color: red;
display:inline-block;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<hr />
<span>span1</span>
<span>span2</span>
<!--
inline-block的特征
1、块元素能在一行上显示
2、内联元素支持宽高
3、没有宽度时，由内容撑开宽度
-->
</body>
</html>
