inline-block和block的区别
一、块级元素和内联（行内）元素的特点
块级元素
独占一行
可以设置属性：width、height、margin-top和margin-bottom
内联元素
多个元素在一行显示
设置属性：width、height、margin-top、margin-bottom无效
补充：对于border、padding、margin-left、margin-right块级元素和内联元素设置后都有效，所以以上的区别中写的是width、height、margin的垂直方向设置margin-top、margin-bottom。
了解内容：以下是HTML中的所有块级元素：
联系方式信息。
文章内容。
伴随内容。
块引用。
定义列表中定义条目描述。
文档分区。
定义列表。
表单元素分组。
图文信息组标题
图文信息组 (参照 )。
区段尾或页尾。
表单。
, , , , ,
标题级别 1-6.
区段头或页头。
标题组。
水平分割线。
有序列表。
行。
预格式化文本。
一个页面区段。
表格。
无序列表。
二、 display属性
display 属性可以设置元素外部显示类型元素的外部显示类型将决定该元素在流式布局中的表现。
（注意：设置块级元素的外部显示类型display：inline;不是把块级元素变成了内联元素，它本身还是块级元素（见上文所有的块级元素），只是它具备了内联元素的显示特点。
那么外部显示类型display: inline-block; 的显示特点是什么呢？从名字上看，它应该是具备了块级和内联元素的特点，没错，它结和了块级元素：可以设置属性：width、height、margin-top和margin 和内联元素：多个元素在一行显示的特点
display: inline代码及显示效果
这里我使用了内联元素span，其display默认值是inline。因此，不需要我显示的指定该值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display: inline</title>
<style>
span {
width: 50px;
height: 50px;
margin-top: 20px;
margin-bottom: 20px;
background-color: red;
}
div {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<span>Hello HTML</span>
<span>Hello HTML</span>
<span>Hello HTML</span>
</div>
</body>
</html>
如图所示，满足了内联元素的特点：多个元素在一行显示，设置属性：width、height、margin-top、margin-bottom无效
display: block代码及显示效果
仅仅将span替换为了p元素，样式设置没变。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display: block</title>
<style>
p {
width: 50px;
height: 50px;
margin-top: 20px;
margin-bottom: 20px;
background-color: red;
}
div {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>hello HTML</p>
<p>hello HTML</p>
<p>hello HTML</p>
</div>
</body>
</html>
如图所示，满足了块级元素的特点：每个元素独占一行，设置属性：width、height、margin-top、margin-bottom有效
display: inline-block 用于内联元素
这里我对span元素的样式添加了display: inline-block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display: inline</title>
<style>
span {
/*添加display: inline-block;*/
display: inline-block;
width: 50px;
height: 50px;
margin-top: 20px;
margin-bottom: 20px;
background-color: red;
}
div {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<span>Hello HTML</span>
<span>Hello HTML</span>
<span>Hello HTML</span>
</div>
</body>
</html>
如图所示：它结和了块级元素：可以设置属性：width、height、margin-top和margin 和内联元素：多个元素在一行显示的特点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display: block</title>
<style>
p {
display: inline-block;
width: 50px;
height: 50px;
margin-top: 20px;
margin-bottom: 20px;
background-color: red;
}
div {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>hello HTML</p>
<p>hello HTML</p>
<p>hello HTML</p>
</div>
</body>
</html>
display: inline-block 用于块级元素
这里我对p元素的样式添加了display: inline-block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display: inline-block</title>
<style>
p {
/*添加display: inline-block;*/
display: inline-block;
width: 50px;
height: 50px;
margin-top: 20px;
margin-bottom: 20px;
background-color: red;
}
div {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>hello HTML</p>
<p>hello HTML</p>
<p>hello HTML</p>
</div>
</body>
</html>
如图所示：它结和了块级元素：可以设置属性：width、height、margin-top和margin 和内联元素：多个元素在一行显示的特点
