一、元素的类型
1：块元素
在页面中以区域块的行书出现，每个块元素通常会
独自占据一行或多行，可以对齐设置宽度、高度、对齐等属性2：行内元素
不占据独立的区域
行内元素仅靠自身字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等
常见的块元素
<div>/<h1>/<p>/<li>/<ul>其中div是最典型的块元素
常见的行内元素
<span>/<strong>/<a>/<b>/<u>其中span标记是最典型的行内元素
注意 ：行内块元素：img/input/是两个特殊的行内元素，但是可以设置宽、高等块元素对应的属性。
二、<span>标签
-
1.span标签是一个
行内标记 -
2.
<span>与</span>之间只能包含文本和嵌套各种行内标记。 -
3.span标记常用语定义网页中某些特殊显示的文本，配合
class/id属性使用 -
4.当行其它行内标记窦不合适时，就可以使用span标记。
-
span标签本身没有自带结构与样式特征
-
<div>可以嵌套<span>标签，但<span>不可以嵌套<div>标签
span标签的用法与效果
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>span标签</title>
<style>
span{
color: green;
font-size: 20px;
}
.one{
color: blue;
font-size: 24px;
}
.two{
color: red;
font-size: 16px;
}
</style>
</head>
<body>
<span>
<span class="one">木偶戏</span>
是中国的一种古老的民间艺术，
<span class="two">是中国乡土艺术的瑰宝</span>
</span>
</body>
</html>
三、元素类型的转换
利用元素类型转换我们可以使用
-
1.使用方法
display属性 -
2.display对应的属性值
属性值 含义 inline 可以将元素 转换为行内元素，具有行内元素的属性block 将元素 转换为块元素，可以设置宽高等具有块元素的属性Inline-block 将元素转换为 行内块元素可以设置宽高属性，但该元素不会独占一行none 主要用于设置一些隐藏的盒子或者弹窗, 不显示也不占用页面空间
元素类型转换的演示代码
<html>
<head>
<meta charset="UTF-8">
<title>元素类型转换</title>
<style>
div{
width: 200px;
height: 50px;
background:#0000D3;
}
span{
width: 200px;
height: 50px;
background:#AA0306;
display: block;/*将span标签区域转换成了块元素，即可按照块元素的方式设置样式。*/
}
</style>
</head>
<body>
<div>111111</div>
<div>222222</div>
<div>333333</div>
<span>AAAAAA</span>
<span>BBBBBB</span>
<span>CCCCCC</span>
</body>
</html>