块级元素：块级大多为结构性标记
div、h1~h6、ul、ol、dl、form、table、p、hr、pre、address、center、blockquote、marquee
行内元素：行内大多为描述性标记
span、a、b、strong、i、em、img 、input、textarea、select、u、br、、、sup、sub、del
块级元素
1.总是从新的一行开始
2.高度、宽度都是可控的
3.宽度没有设置时，默认为100%
4.块级元素中可以包含块级元素和行内元素
行内元素
1.和其他元素都在一行
2.高度、宽度都是不可控的
3.宽高就是内容的宽高，不可以改变
4.行内元素只能包含行内元素，不能包含块级元素
（2）行内元素转换为行内块元素（display: inline-block;）或者块元素（display: block;）
行内元素增加了左内边距，但是没有改变为行内块元素之前：
转换为display: inline-block;行内块元素之后：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
position: relative;
background-color: pink;
height: 100px;
} .parent span {
background-color: yellow;
width: 100px;
height: 50px;
padding-left: 100px;
display: inline-block;
}
.parent i {
background-color:skyblue;
width: 100px;
height: 50px;
padding-left:100px;
display: inline-block;
}
.parent a{
background-color:rgb(49, 231, 49);
width: 100px;
height: 50px;
padding-left:100px;
display: inline-block;
} </style>
</head>
<body>
<div class="parent">
<span>span</span>
<i>iiiiiii</i>
<a ref="#">aaaaaa</a>
</div>
</body>
</html>
（3）将元素设置为“ position: absolute;”或者“position: fixed;”之后，就可以直接设置高度和宽度
加绝对定位之前显示效果：
加了绝对定位之后显示效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
position: relative;
background-color: pink;
width: 500px;
height: 100px;
}
/* 给span没有设置绝对定位之前，设置宽度和高度是不起作用的 */
.parent span {
background-color: yellow;
width: 100px;
height: 50px;
}
/* 第一个span靠左绝对定位 */
.parent span:nth-child(1) {
position: absolute;
top:10px;
}
/* 第二个span靠右绝对定位 */
.parent span:nth-child(2) {
position: absolute;
right: 10px;
top:10px;
}
</style>
</head>
<body>
<div class="parent">
<span>测试1</span>
<span>测试2</span>
</div>
</body>
</html>
（4）将元素设置为浮动之后，也可以设置宽高，元素设置为浮动之后，就可以当做行内块元素来看
加入浮动之前
加入浮动之后
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
position: relative;
background-color: pink;
height: 100px;
}
.parent span {
float:left;
background-color: yellow;
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<div class="parent">
<span>span</span>
</div>
</body>
</html>
