一、元素显示模式（块级元素、行内元素、行内块元素）
1.块级元素
显示特点：
a. 独占一行（一行只能显示一个）
b.宽度默认是父元素的宽度，高度默认由内容撑开
c.可以设置宽高
代表标签：
div、p、h系列、ul、li、dl、dt、dd、header、nav、footer……
示例代码：
<style>
.box1{
width: 300px;
height: 100px;
background-color: pink;
}
.box2 {
background-color: orange;
}
</style>
<div class="box1">块级元素显示特点：可以设置宽高，独占一行</div>
<div class="box2">块级元素显示特点:宽度默认是父元素的宽度，高度默认由内容撑开</div>
2.行内元素
显示特点：
a. 一行可以显示多个
b. 宽度和高度默认由内容撑开
c. 不可以设置宽高
代表标签：
a、span 、b、u、i、s、strong、ins、em、del……
示例代码：
<style>
span {
width: 100px;
height: 100px;
background-color: pink;
}
a {
width: 100px;
height: 100px;
background-color: orange;
}
b {
width: 100px;
height: 100px;
background-color: green;
}
</style>
<span>一行可以显示多个</span>
<a href="#">宽度和高度默认由内容撑开</a>
<b>不可以设置宽高</b>
3.行内块元素
显示特点：
a.一行可以显示多个
b.可以设置宽高
代表标签：
input、textarea、button、select……
示例代码：
<style>
input {
width: 100px;
height: 100px;
background-color: pink;
}
textarea {
width: 100px;
height: 100px;
background-color: orange;
/* 基线对齐方式：基线居中对齐 */
vertical-align: middle;
}
</style>
<input type="text">
<textarea></textarea>
二、元素显示模式转换
1.display: block,将元素转换为块级元素
2.display:inline-block,将元素转换为行内块级元素
3.display: inline,将元素转换为行内级元素
