浅析html5中css的元素类型：
从css的显示状态对标签进行分类，主要分为：块状元素、内联元素（包括行内元素）、可变元素。
1、默认情况下元素类型的特点：
块状元素特点：
a.在页面中以矩形区域显示；
b.自上而下（即纵向）排列，独占一行；
c.可以设置宽高；
d.一般情况下可以作为其他元素或内容的容器/父级。
内联元素的特点：
a.在页面中最小单位也是矩形；
b.在一行内（即横向）逐个排列；
c.不可以添加宽高，其大小由内容撑开的；
d.内联元素也符合盒模型的规则，但个别属性会出现问题。如，padding-top/bottom，margin-top/bottom。
清除距离的方法——1.加浮动；2.把所有元素放在一行写，但不方便使用。）
可变元素（这里只做了解即可）：
即根据上下文的显示来确定此元素是块状元素还是内联元素。如button，它既可以作为一个双标签使用：<botton> </botton>，也可以在表单里作为按钮使用。
2.分类：
块状元素：div（最常用的块状元素）、dl-dt-dd、form、h1-h6、hr、ol、ul、li、p、fieldset（表单字段集）、colgroup-col（表单列分组元素）、table-tr-td
内联元素：span、a、b、br、i、em、img、input、lable、strong、sup、sub、textrea（多行文本输入框）、u、select（项目选择）
3.元素类型的转换：
display属性：作用检索或设置元素生成的盒模型类型。
常用属性值：
a.display:block;
b.display:inline;
c.diaplay:none;
注：li默认值为：list-item（列表元素）
input默认值为：inline-block（行内块元素）
4.行内块元素属于内联元素里的特殊存在。
行内块元素的特点：
a.可以设置宽高
b.在一行内逐个显示，默认情况下元素之间有距离（可以通过float消除距离）。
c.当前元素的display值为inline-block时，可以支持vertical-align属性，即垂直对齐----属性值：top bottom middle baseline（基线对齐）
常见的行内块元素包括：input、img（img在默认情况下，在浏览器中的display值为inline，但它是置换元素，可以直接设置大小，故作为行内块元素使用）
为什么能给img直接加宽高？
因为img是置换元素。
置换元素，如input img 是依赖标签的属性或元素自身类型，来决定当前元素在页面中的显示状态。如input的text 、password、submit。 置换元素在页面显示过程中生成一个框架，这个框架可以直接添加大小。
运用：如何让一个元素在父元素里左右上下居中？
步骤：1.给父元素添加text-align:center（左右居中）
2.给当前元素添加display:inline-block; vertical:middle;
3.在当前元素后面不回车直接加一个空的span。给span设置样式：display:inline-block; width:0; height:100%; vertical-align:middle;
逆战 前行！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 600px;
height: 600px;
background: yellow;
margin: 50px auto;
text-align: center;
}
h3{
/* display: block; */
width: 300px;
height: 300px;
background: greenyellow;
display: inline-block;
vertical-align: middle;
}
span{
/* display: block; */
height: 100%;
/* width:100px; */
width: 0;
background: pink;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div>
<h3></h3><span></span>
</div>
</body>
</html>
