星星博客 »  > 

2021-05-30

通过浏览学习网站,我解答了以下疑惑:
在浏览器预览效果,有些元素是独占一行的,其他元素不能跟这个元素位于同一行,如p、div、hr等。而有些元素不是独占一行的,其他元素可以跟这个元素位于同一行,如strong、em等。特别注意一下,这里所谓的“独占一行”,并不是在HTML代码里独占一行,而是在浏览器显示效果中独占一行。
注:标签,也叫“元素”,例如p标签又叫p元素。叫法不同,意思相同。
在HTML中,根据元素的表现形式,一般可以分为两类(暂时不考虑inline-block)。(1)块元素(block)(2)行内元素(inline)
一、块元素在HTML中,块元素在浏览器显示状态下将占据整一行,并且排斥其他元素与其位于同一行。此外,一般情况下,块元素内部可以容纳其他块元素和行内元素。

HTML常见块元素块元素
h1~h6 标题元素 p 段落元素 div div元素 hr水平线 ol有序列表 ul无序列表

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

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

HTML常见行内元素
strong 粗体元素
em 斜体元素
a 超链接
span 常用行内元素,结合CSS定义样式

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

相关文章