Inline elements
在 HTML 中, 行内元素是那些只占用定义元素的标记所限定的空间, 而不是破坏内容的流。在本文中, 我们将检查 HTML 行内元素以及它们与块级元素的区别。
行内元素不会在新行上开始, 只需要尽可能多的宽度。
行内元素与块级元素对比
这是最容易用一个简单的例子来证明。首先,我们将使用一些简单的CSS:
.highlight {
background-color:#ee3;
}行内
首先,让我们看看下面的示例,它演示了一个内联元素:
<p>The following span is an <span class="highlight">inline element</span>;
its background has been colored to display both the beginning and end of
the inline element's influence.</p>在此示例中, <p> (段落) 块级元素包含一些文本。在该文本中, 是一个 <span> 元素, 它是一个行内元素。由于<span>元素是行内元素,因此该段落正确呈现为单个完整的文本流,如下所述:
块级别
现在,让我们将该<span>更改为块级元素,如<div>:
<p>The following div is an <div class="highlight">block-level element;</div>
its background has been colored to display both the beginning and end of
the block-level element's influence.</p>使用与之前相同的CSS呈现，我们得到：
看到区别了吗？<div> 元素完全更改文本的布局, 将其拆分为三段: 在 <div> 之前的文本, 然后是 <div> 的文本, 最后是后面的文本 <div>。
更改元素级别
您可以使用 "CSS 显示" 属性更改元素的级别。内嵌块, 通过将显示的值从 "内联" 更改为 "block", 可以告诉浏览器在块框中而不是在内联框中呈现内联元素。它不一定会使元素呈现出与原来的内嵌块完全一样的效果, 因此请务必查看结果。
概念差异
简而言之,下面是行内和块级元素之间的基本概念差异:
内容模型。通常，行内元素可能只包含数据和其他行内元素。您不能将块元素放在行内元素中.默认情况下，行内元素不会强制在文档流中开始一个新行。另一方面，块元素通常会导致换行（虽然像往常一样，这可以使用CSS进行更改）。
行内元素列表
以下元素默认为行内元素：
<a> <b> <big> <i> <small> <tt> <abbr> <acronym> <cite> <code> <dfn> <em> <kbd> <strong> <samp> <time> <var> <bdo> <br> <img> <map> <object> <q> <script> <span> <sub> <sup> <button> <input> <label> <select> <textarea>
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
