块级元素
代表：<h1>~<h6>,<p>,<div>,<ol>,<li>,<ul>,<dl>,<dt>,<dd>
特点：
1.如果块级元素不设置宽度，那么该元素的宽度等于其父元素的宽度
2.所有的块级元素都独占一行
3.可以为块级元素设置宽度和高度
行内元素
代表：<span>,<strong>,<i>,<a>
特点：
1.所有的行内元素都在一行显示
2.行内元素不能设置宽度和高度
3.只靠自身的字体大小和图像尺寸来支撑其大小
行内块元素
代表：<input>,<img>
特点：
1.元素可以设置宽度和高度
2.元素在一行上显示
<span>标签
1.仅作为只包含文本和各种行内元素的容器
2.<span>标签中可以嵌套多层<span>标签
3.用来控制某些需要特殊显示的文本
元素类型转换
转换块级元素
display: block;转行内块元素
display: inline-block;转行内元素
display: inline;总结：
◆一般情况下，如果我们希望页面中的行内元素设置宽度和高度，那么我考虑将行内元素转化为块级元素或行内块元素。
◆不需要将行内块元素转化为行内元素或者块级元素
伪元素
::before
::after
作用：用来模拟行内元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
width: 200px;
height: 200px;
border: 1px solid red;
}
div::before {
content: "";
width: 50px;
height: 50px;
background-color: red;
display: block;
}
div::after {
content: "";
width: 50px;
height: 50px;
background-color: green;
display: block;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>总结
1.伪元素必须要设置content属性，即使没有内容
2.伪元素属于行内元素
3.伪元素中不能再创建伪元素
4.一般要将伪元素依附于某一个标签
