当前位置：首页 > news >正文

行内元素块元素

news 2025/8/31 8:58:44

<!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，这使得它能够像行内元素一样排布，但仍然可以设置宽度和高度。