元素显示模式

元素的显示模式

元素显示模式指的是HTML元素在页面中的呈现方式，主要分为：

• 块级元素（如<div>独占一行）
• 行内元素（如<span>可与其他元素共处一行）

提示

显示模式可以通过CSS的display属性进行修改

块元素

典型标签：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>

特点

1. 独占一行（自动换行）
2. 可控制宽高、内外边距
3. 默认宽度为父容器的100%
4. 可包含其他块级或行内元素

注意事项

<!-- 错误示例 -->
<p>
<div>这里会破坏段落结构</div>
</p>

警告

文字类块元素（如<p>、<h1>~<h6>）内部不能包含其他块级元素

示例代码

<style>
.block-demo {
height: 200px;
background-color: pink;
}
</style>

<div class="block-demo">独占一行的块元素</div>

行内元素（内联元素）

典型标签：<span>、<a>、<strong>、<em>等

特点

1. 可与其他行内元素共处一行
2. 设置宽高无效
3. 默认宽度为内容宽度
4. 通常只能包含文本或其他行内元素

特殊情况

<!-- 合法写法 -->
<a href="#" style="display: block;">
<div>转换模式后可包含块元素</div>
</a>

示例代码

<style>
.inline-demo {
/* 以下设置无效 */
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>

<span class="inline-demo">行内元素</span>
<strong>相邻行内元素</strong>

行内块元素

典型标签：<img>、<input>、<td>

特点

1. 可与其他元素共处一行（保留行内特性）
2. 可设置宽高（保留块级特性）
3. 默认有间距（源自HTML中的空白符）

示例代码

<style>
input {
width: 200px;
height: 40px;
}
</style>

<input type="text">
<input type="password">

显示模式总结

| 类型 | 排列方式 | 样式控制 | 默认宽度 | 包含规则 | ||-|-|-|-| | 块级 | 独占一行 | 完全可控 | 父级100% | 可含任何元素 | | 行内 | 同行显示 | 宽高无效 | 内容宽度 | 仅含文本/行内元素 | | 行内块 | 同行显示 | 可控宽高 | 内容宽度 | - |

显示模式转换

通过display属性实现：

.block {
display: block;/* 转为块级 */
}
.inline {
display: inline;/* 转为行内 */
}
.inline-block {
display: inline-block;/* 转为行内块 */
}

转换示例

<style>
.converted-link {
display: block;
width: 200px;
height: 50px;
line-height: 50px;
}
</style>

<a href="#" class="converted-link">转换为块级的链接</a>