/*HTML标签类型
* 1.块级标签：
* 1.1 独占一行的标签
* 1.2 能随时设置高度和宽度(如div p h1 h2 ul li)
*
*
*
*
* 2.行内标签（内联标签）
* 2.1 多个标签能同时显示在一行
* 2.2 宽度和高度取决于内容的尺寸（如span a label）
*
*
* 3.行内-块级标签（内联-块级标签）
* 3.1 多个行内-块级标签可以显示在同一行
* 3.2 能随时改变宽度和高度（如 input button）
* */
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html</title>
<style>
/*HTML标签类型
*
1.块级标签：
*
1.1 独占一行的标签
*
1.2 能随时设置高度和宽度(如div p h1 h2 ul li)
*
*
*
*
*
2.行内标签（内联标签）
*
2.1 多个标签能同时显示在一行
*
2.2 宽度和高度取决于内容的尺寸（如span a label）
*
* *
3.行内-块级标签（内联-块级标签）
*
3.1 多个行内-块级标签可以显示在同一行
*
3.2 能随时改变宽度和高度（如 input button）
*
*
*
*
*
*
4.修改标签的显示类型
*
4.1 CSS中有个display属性，能修改标签的显示类型
*
4.1.1 none: 隐藏标签
*
4.1.2 block: 让标签变为块级标签 *
4.1.3 inline：让标签变成行内标签
*
4.1.4 inline-block：让标签变成行内-块级标签
*
*
*
* /
/块级/
div{
background-color: coral;
width: 150px;
height: 20px;
/隐藏这个div标签/
/display: none;/
/变为行内标签/
display: inline;
}
/行内/
span{
background: blue;
/设置无效/
width: 150px;
height: 20px;
/变为块级标签/
/display: block;/
display: inline-block;
}
/行内-块级*/
button{
background-color: pink;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div>块级标签</div>
<br />
<span>行内标签</span>
<span>变成行内-块级标签</span>
<br />
<br />
<br />
<input />
<button></button>
<br />
<br />
</body>
</html>
