前言

块元素和行内元素,是HTML中极其重要的概念,同时也是学习css的重要基础知识。这一节的内容, 小伙伴们要重点掌握。

在之前的学习中,小伙伴们可能会发现:在浏览器预览效果,有些元素是独占一行的,元素不能与这个元素位于同行,如pdivhr等;而有些元素不是独占一-行的, 其他元素与这个元素位于同一行,如strongem等。特别注意一下, 这里所谓的“独占-行”,并不HTML代码里独占一行,而是在浏览器显示效果中独占一行。

其中,标签也叫作“元素” ,如p标签又叫p元素。叫法不同,意思相同。这一节使用“行来称呼,也是让大家熟悉这两种叫法。

在HTML中,根据元素的表现形式,一般可以分为两类(暂时不考虑inine-block)

  • 块元素(block)
  • 行内元素(inline)

块元素

在html中,块元素在浏览器显示状态下将占据整一行,并且排斥其他元素与其位于同一行。一般情况下,块元素内部可以容纳其他块元素和行内元素

块元素说明
h1~h6标题元素
p段落元素
divdiv元素
hr水平线
ol有序列表
ul无序列表

举例

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>块元素和行内元素</title>
</head>
<body>
<div>
<h3>块元素和内元素</h3>
<p>“举一个列子”</p>
<strong>块元素</strong>
<em>内元素</em>
</div>
</body>
</html>

浏览器预览一下

预览效果

分析

分析图

结论

通过上面的分析图,我们可以得到以下结论

  1. h3和p是块元素,它们的显示效果是独占一行的,并且排斥任何元素与它们位于同一行。strong和em是行内元素,即使代码不位于同一行,它们的显示效果也是位于同一行的(显示效果与代码是否位于同一行没有任何关系)
  2. h3、p、strong和em元素都是div元素内部的,也就是说,块元素内部可以容纳其他块元素和行内元素。

由此,我们可以总结出块元素具有以下两个特点

  • 块元素独占一行,排斥去他元素(包括块元素和行内元素)与其位于同一行。
  • 块元素内部可以容纳其他块元素和行内元素。

行内元素

在HTML中行内元素与块元素恰恰相反,行内元素是可以与其他行内元素位于同一行的,行内元素内部(标签内部)只可以容纳其他行内元素,不可以容纳块元素。

常见的行内元素

行内元素说明
strong粗体元素
em斜体元素
a超链接
span常用于行内元素,结合css定于样式

在学完css之后,建议再回头看一下这一节, 相信大家就会对块元素和行内元素有非常深的了解

对于行内元素效果,可以看块元素的例子,从这个例子中,我们可以总结出行内元元素具有以下两个特点

  • 行内元素可以与其他行内元素位于同一行。
  • 行内元素内部可以容纳其他行内元素,但不可以容纳块元素。

块元素和行内元素非常复杂,大家在这一节重点理解其概念就行了,不需要去记忆块元素有哪些、行内元素有哪些。


以下内容是广告👇🏻
最后修改:2020 年 11 月 10 日 04 : 21 PM
如果觉得我的文章对你有用,请随意赞赏