CSS 的元素类型

「这是我参与11月更文挑战的第29天，活动详情查看：2021最后一次更文挑战」

CSS 的元素类型可以按两种方式划分：

1. 块级元素（block-level elements）和行内级元素（inline-level elements）
2. 可替换元素（replaced elements）和非替换元素（non-replaced elements）

1. 块级元素和行内级元素

• 根据元素的显示（能不能在同一行显示）类型，HTML 元素可以主要分为两大类：
  • 块级元素（block-level elements）
    • 独占父元素一行
    • 比如 div、p、pre、h1~h6、ul、ol、li、dl、dt、dd、table、form、article、aside、footer、header、hgroup、main、nav、section、blockquote、hr 等
  • 行内级元素（inline-level elements）
    • 多个行内级元素可以在父元素的同一行中显示
    • 比如 a、img、span、strong、code、iframe、label、input、button、canvas、embed、object、video、audio 等

2. 替换元素和非替换元素

• 根据元素的内容（浏览器是否会替换掉元素）类型，HTML 元素可以主要分为两大类：
  • 替换元素（replaced elements）
    • 元素本身没有实际内容，浏览器根据元素的类型和属性，来决定元素的具体显示内容
    • 比如 img、input、iframe、video、embed、canvas、audio、object 等
  • 非替换元素（non-replaced elements）
    • 和替换元素相反，元素本身是有实际内容的，浏览器会直接将其内容显示出来，而不需要根据元素类型和属性来判断到底显示什么内容
    • 比如 div、p、pre、h1~h6、ul、ol、li、dl、dt、dd、table、form、article、aside、footer、header、hgroup、main、nav、section、blockquote、hr、a、strong、span、code、label 等

在 CSS 中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。

简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。某些可替换元素，例如 `` 元素，可能具有自己的样式表，但它们不会继承父文档的样式。

3. 元素的分类总结：

举例：

.box {
    height: 100px;
    /* 注意：width 设置的只是元素的内容，对于块级元素而言，它仍然是占据父元素的一整行 */
    width: 500px;
    background-color: orange;
}
.inner {
    height: 30px;
    background-color: skyblue;
}
.p {
    background-color: green;
}
span {
    background-color: #f00;
}
strong {
    background-color: #0f0;
}
img {
    height: 200px;
    width: 100px;
}
input {
    height: 100px;
    width: 100px;
}

<!-- 
    块级元素的特点：独占父元素的一行
    行内级元素的特点：可以和其它行内级元素在父元素的同一行中显示
-->
<!-- 1. 块级元素 -->
<div class="box">
    <div class="inner"></div>
    <p class="p">我是段落</p>
</div>

<!-- 2. 行内级元素 -->
<!-- 默认是根据基线对齐的 -->
<span>我是 span 元素</span>
<strong>我是 strong 元素</strong>

<img src="../img/test_01.webp" alt="">
<input type="text">

<iframe src="http://www.baidu.com" frameborder="0"></iframe>

效果：