HTNL块级元素，内联元素和行内块元素

最新推荐文章于 2024-09-10 18:37:52 发布

码农的白月光

最新推荐文章于 2024-09-10 18:37:52 发布

阅读量398

点赞数 13

文章标签： html5 css css3

本文链接：https://blog.csdn.net/m0_75247890/article/details/140791861

版权

块级元素 (Block-Level Elements)

特点：
- 默认情况下，每个块级元素都会开始新的一行。
- 它们可以包含其他块级元素和内联元素。
- 可以设置宽度和高度。
- 可以设置内边距（padding）和外边距（margin）。
- 默认占据父容器的全部宽度。
- 可以设置垂直对齐方式。
常见例子：
- <div>：最常用的通用容器。
- <p>：段落。
- <h1> 至 <h6>：标题。
- <ul> 和 <ol>：无序列表和有序列表。
- <table>：表格。
- <form>：表单。

内联元素 (Inline Elements)

特点：
- 不会开始新的行，而是与其他内联元素在同一行内显示。
- 宽度和高度由其内容决定，不能单独设置。
- 只能设置水平方向的内边距和外边距（padding-left, padding-right, margin-left, margin-right）。
- 可以包含文本和其他内联元素。
- 默认只占据必要的宽度。
常见例子：
- <span>：通用内联容器。
- <a>：超链接。
- <img>：图像。
- <strong> 和 <em>：强调文本。
- <abbr>：缩写词。
- <code>：代码样式的文本。

行内块元素 (Inline-Block Elements)

特点：
- 类似于内联元素，它们不会开始新的行，但是可以设置宽度和高度。
- 可以设置水平方向和垂直方向的内边距和外边距。
- 默认只占据必要的宽度，但可以指定具体的宽度。
- 可以包含其他内联元素或块级元素。
如何创建：
- 使用 CSS 的 display: inline-block; 属性来将元素转换为行内块元素。
- 通常用于需要在一行内排列多个元素同时又能够控制它们的尺寸的情况。
示例：
- <button>：按钮。
- <input type="button">：输入框形式的按钮。
- <select>：下拉列表。
- <label>：标签。
- <img>：图像（默认为内联，可以设置为行内块）。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Block and Inline Elements</title>
<style>
  .inline-block {
    display: inline-block;
    background-color: lightblue;
    padding: 10px;
    margin: 5px;
  }
  .block {
    background-color: lightgreen;
    padding: 10px;
    margin: 5px;
  }
  .inline {
    background-color: lightyellow;
    padding: 10px;
    margin: 5px;
  }
</style>
</head>
<body>
  <div class="block">
    This is a block element.
    <span class="inline">This is an inline element inside the block.</span>
  </div>

  <span class="inline">This is another inline element.</span>

  <div class="inline-block">
    This is an inline-block element.
  </div>

  <div class="inline-block">
    Another inline-block element.
  </div>
</body>
</html>
//块级元素 .block 占据整行，而内联元素 .inline 和行内块元素 .inline-block 则在同一行内显示。通过设置背景颜色，我们可以清楚地看到不同元素之间的差异。