一. 元素种类

  1. 行内元素
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <a>  
    <strong>  
    <b>  
    <em>  
    <del>  
    <span>  
    <img>  
    <input>  
    <select>
    行内元素（inline elements）在HTML中指的是那些不会自动在其前后创建新行的元素，它们只占据必要的宽度，并且可以与其他行内元素并排显示。以下是一些关于行内元素的特点和示例，以帮助您更好地理解：

特点

  • 不换行：行内元素通常不会独自占据一行，它们会与周围的文本或行内元素共享一行。
  • 宽度：行内元素的宽度是由其内容决定的，而不是由外部容器或CSS样式定义的。
  • 高度和行高：行内元素可以设置高度和行高，但这些样式可能不会影响元素的实际布局，因为行内元素通常只占据一行文本的高度。
  • 垂直对齐：行内元素通常沿着它们的基线对齐，这意味着它们会与周围的文本基线对齐。

示例

假设有以下HTML代码：

1
2
3
<p>
  这是一个段落，其中包含了一些<em>行内元素</em>，比如< strong >加粗文本</ strong >和< a href="https://example.com">链接</a>。
</p>

在这个例子中，<em>、<strong>和<a>都是行内元素。当这段代码在浏览器中渲染时，它们的表现如下：

  • <em>会使其内容变为斜体。
  • <strong>会使其内容变为粗体。
  • <a>会创建一个链接。
    这些元素不会独自占据一行，而是与周围的文本共享同一行，就像这样：
    这是一个段落，其中包含了一些行内元素，比如加粗文本和链接。
  1. 块级元素
    1
    2
    3
    4
    5
    6
    7
    8
    <h1>~<h6>
    <p>
    <div>
    <ul>
    <ol>
    <li>
    <div>
    <dl>
    总是在新行上开始，默认占据一整行；
    高度，行高以及外边距和内边距都可控制；
    宽带始终是与浏览器宽度一样，与内容无关；
    它可以容纳内联元素和其他块元素。
  2. 空元素
    1
    <br> <hr> <img> <input> <link> <meta>

二、行内元素和块级元素的转换

1
2
3
4
5
6
//定义元素为块级元素
display: block
//定义元素为行内元素
display inline
//定义元素为行
display: inline-block

三、块级元素和行内元素的区别

我们区分块级元素和行内元素，首先行内元素是在一行中能有多个的，块级元素是自己占一行的。接着可以从三个方面来查看

  • 是否占据一行，还是能多个处于一行中，行内是可以的；
  • 是否可以设置宽高，行内是不可以的。
  • 行内元素只可以容纳文本和其他行内元素，块级元素啥都可以容纳

总结

行内元素和块级元素很好区分，顾名思义，行内就是能都在一行里的，一行可以有多个<a>标签，可以有多个<input>标签，而同类的还有<span>/<img >/<strong>等，这不就很容易记住了。而块级元素就是要自己占一行的，那不就有<div>，还有我们使用的列表<ul>/<ol>，除此之外还有<h1>～<h6>/<p>等等。

code example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
    <title>行内元素转块级元素示例</title>
    <style>
        /* 默认的 span 元素是行内元素 */
        span {
            background-color: yellow;
            padding: 10px;
        }

        /* 将 span 元素转换为块级元素 */
        .block-span {
            display: block;
            width: 200px;
            text-align: center;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <p>这是普通的段落。</p>
    <span>这是一个行内元素，默认不会独占一行，行内元素会和周围的文本紧密排列。</span>aaa
    <p>行内元素的表现不会影响其他内容的布局。例如，<span>这是另一个行内元素</span>，它仍然在当前行内。</p>

    <p>下面展示一个被转换为块级元素的 <code>span</code> 元素：</p>
    <span class="block-span">这个 span 元素被转换为块级元素，会独占一行。</span>aaa
    <p>由于被设置为块级元素，即使紧跟在其后的文本也会被移到下一行：</p>
    <span class="block-span">块级元素通常具有宽度和高度，独占一行。</span>aaa

    <p>这就是行内元素与块级元素的不同展示效果。</p>
</body>
</html>
许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。