CSS元素显示模式
1、容器级标签：可以嵌套任意的标签
容器级标签包括：div、h、ul、ol、dl、li、dt、dd
2、文本级标签：只能嵌套文字、图片、超链接标签
文本级标签包括：span、p、strong、em、ins、del
3、块级元素：p、div、h、ul、ol、dl、li、dt、dd。
块级元素会独占一行，可以设置宽度与高度。
4、行内元素：span、strong、em、ins、del。
行内元素不会独占一行，无法设置宽度与高度。
5、块级行内元素
块级元素无法在一行显示，行内元素无法设置宽高，块级行内元素同时拥有他们两个的特点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
p {
background: red;
width: 300px;
height: 100px;
}
strong {
background: blue;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<strong>我是文字</strong>
<strong>我是文字</strong>
</body>
</html>
6、模式转换
如果需要块级元素拥有行内元素的属性，就需要对模式进行转换。
格式：转换成块级：display: inline;
转换成行内：display: block;
转换成块级行内：display: inline-block；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
p {
display: inline;
background: red;
width: 300px;
height: 100px;
}
strong {
display: block;
background: blue;
width: 300px;
height: 100px;
}
em {
display: inline-block;
background: green;
width: 300px;
height: 100px;
}
</style>
</head>
<body>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<strong>我是文字</strong>
<strong>我是文字</strong>
<em>121212</em>
<em>121212</em>
</body>
</html>