1.块元素
2.行内元素
3.行内块元素
4.总结
5.元素显示模式的转换
(1)转换为块元素:display: block;
(2)转换为行内元素:display: inline;
(3)转换为行内块元素:display: inline-block;
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<div style="width: 40px;height: 20px;display: inline-block;background-color: black"></div>
<div style="width: 40px;height: 15px;display: inline-block;background-color: red"></div>
</div>
</body>
</html>