<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>显示例子</title>
<style>
/* 将行内元素 (span) 转为块级元素 */
span {
display: block; /* 将 span 转为块级元素 */
width: 200px; /* 设置宽度 */
height: 50px; /* 设置高度 */
background-color: lightblue; /* 设置背景色 */
margin-bottom: 10px; /* 设置底部外边距 */
}
/* 将块级元素 (div) 转为行内元素 */
div {
display: inline; /* 将 div 转为行内元素 */
width: 200px; /* 宽度设置会被忽略，因为行内元素不允许设置宽度 */
height: 50px; /* 高度也不会被应用 */
background-color: lightcoral; /* 设置背景色 */
margin-right: 10px; /* 设置右边外边距 */
}
/* 将块级元素 (p) 转为 inline-block 元素 */
p {
display: inline-block; /* 将 p 元素转为 inline-block，允许设置宽度和高度 */
width: 150px; /* 设置宽度 */
height: 50px; /* 设置高度 */
background-color: lightgreen; /* 设置背景色 */
margin-right: 10px; /* 设置右边外边距 */
}
</style>
</head>
<body>
<!-- 这是一个行内元素 <span> 被转换为块级元素 -->
<span>这是一个行内元素，被转为块级元素。</span>
<!-- 这是一个块级元素 <div> 被转换为行内元素 -->
<div>这是一个块级元素，被转为行内元素。</div>
<div>另一个转为行内元素的 div。</div>
<!-- 这是一个块级元素 <p> 被转换为 inline-block 元素 -->
<p>这是一个 inline-block 类型的段落元素。</p>
<p>另一个 inline-block 类型的段落。</p>
</body>
</html>
中文解释：
行内元素
span转为块级元素：- 通过
display: block，将原本是行内元素的span转换成了块级元素，允许设置宽度、高度，并有一个底部外边距。
- 通过
块级元素
div转为行内元素：- 通过
display: inline，将块级元素div转换为行内元素。由于行内元素不能设置宽度和高度，这些样式将被忽略。
- 通过
块级元素
p转为inline-block元素：- 通过
display: inline-block，将p元素设置为inline-block，这使得它能够像行内元素一样排布，但仍然可以设置宽度和高度。
- 通过
