HTML 内联和块级元素
提示
- HTML元素分类:HTML元素分为行内元素(如
<span>
、<a>
)和块级元素(如<p>
、<div>
),区别在于布局和占据空间的方式。 - 行内元素特性:行内元素不会新起一行,只占据内容所需的宽度,常用于小范围文本格式化和链接。
- 块级元素特性:块级元素会新起一行,占据容器的整个宽度,适用于大范围的布局和内容分组。
HTML 元素大致可以分为以下两类:
- 行内元素:
<span>
、<a>
、<strong>
、<img>
等。 - 块级元素:
<p>
、<div>
、<h1>
、<figure>
等。
HTML 行内元素
行内元素显示在同一行上。它们不会在新行开始,并且只占据其内容所需的宽度。行内元素的一个例子是 <span>
标签。
<p>这是 <span style="border: 1px solid black">span</span> 的工作方式。</p>
浏览器输出
如果我们有多个 span 标签,它们会被放置在同一行上。例如,
<p>
以下的 spans 将是行内的;
<span style="border: 1px solid black">Span 1</span> 和
<span style="border: 1px solid black">Span 2</span>。
</p>
浏览器输出
一些行内元素的例子包括:
- HTML
<a>
标签 - HTML
<input>
标签 - HTML
<span>
标签
大多数 HTML 格式化标签也是行内的。例如:
- HTML
<b>
标签 - HTML
<em>
标签 - HTML
<strong>
标签 等
HTML 块级元素
块级元素占据其容器中可用的整个水平空间。它们在新行开始,并占据其内容所需的高度。
一个块级元素的例子是 HTML 段落标签。
<p style="border: 1px solid black">这是块级元素的工作方式。</p>
浏览器输出
如果我们有多个块级元素,它们将各自占据一行。例如,
<p style="border: 1px solid black">段落是</p>
<p style="border: 1px solid black">块级元素。</p>
浏览器输出
一些常用的块级元素包括:
- HTML
<div>
标签 - HTML 标题
<h1>
-<h6>
- HTML
<p>
标签 等
CSS 与 HTML 行内和块级元素
行内元素中的高度和宽度
CSS 属性 height
和 width
对行内元素没有影响。
<p>
以下 span 是一个
<span style="border: 1px solid black">行内元素。</span>
</p>
<style>
span {
height: 200px; /* 对元素无效果 */
width: 200px; /* 对元素无效果 */
}
</style>
浏览器输出
行内元素的外边距
行内元素不具有上下外边距,它们只遵守左右外边距。
<div><span>1</span><span>2</span></div>
<div><span>3</span><span>4</span></div>
<style>
span {
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
border: 1px solid black;
}
</style>
浏览器输出
行内元素的内边距
行内元素在所有方向上都遵守内边距。
<p><span>这是一个 span</span></p>
<style>
span {
padding: 10px;
border: 1px solid black;
}
</style>
浏览器输出
块级元素中的高度和宽度
块级元素遵守 height
和 width
属性。我们可以使用 CSS 更改块级元素的高度和宽度。
<p style="border: 1px solid black;">这段文字是一个块级元素。</p>
<style>
p {
height: 200px; /* 这是有效的 */
width: 200px; /* 这是有效的 */
}
</style>
浏览器输出
带有父容器的块级元素
即使我们将块级元素的宽度设置为更小的尺寸,块级元素也会占据父容器的整个宽度。因此,没有 CSS,我们无法在同一行中拥有一个块级元素与另一个元素。例如,
<p style="width: 20px; border: 1px solid black;background-color: lightblue">
1
</p>
<p style="width: 20px; border: 1px solid black; background-color: lightblue">
2
</p>
浏览器输出
块级元素中的外边距和内边距
块级元素也遵守上下外边距和内边距方向。例如,
<div>块</div>
<div>块</div>
<style>
div {
border: 1px solid black;
padding: 10px;
margin: 10px;
}
</style>
浏览器输出