CSS 的元素类型

·  阅读 60

「这是我参与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. 元素的分类总结:

元素分类 具体元素 默认特征
块级元素(block-level elements) 替换元素(replaced elements)
非替换元素(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 等
  • 独占父元素的一行
  • 可以随意设置宽高
  • 高度默认由内容决定
行内级元素(inline-level elements) 替换元素(replaced elements) iframe、video、embed、img、canvas、audio、object、input 等
  • 跟其它行内级元素在同一行显示
  • 可以随意设置宽高
非替换元素(non-replaced elements) a、strong、span、code、label 等
  • 跟其它行内级元素在同一行显示
  • 不可以随意设置宽高
  • 宽高由内容决定

举例:

.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>
复制代码

效果:

image-20201212211236428.png

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改