4.9 块元素和行内元素
- 作者(helicopter)
- 赞(95)
- 浏览(41487)
- 说明:原创教程,禁止转载
块元素和行内元素,这个概念极其重要,这同时也是CSS的基础知识之一。大家不要觉得不重要就跳过。
大家在之前的学习可能发现,在浏览器的显示效果中,有些元素(即标签)它是独占一行的,别的元素不能跟这个元素位于同一行,如<h1>~<h6>、<p>、<div>等;而有些元素它是可以跟其他元素位于同一行,如<strong>、<em>、<u>等。
:标签又叫“元素”,例如<p>标签又叫<p>元素,叫法不同,意思相同。这一节使用“元素”来称呼,也是让大家对这两种叫法有个熟悉。在这里,所谓的“独占一行”并不是在代码中独占一行,而是在浏览器显示效果中独占一行。
HTML元素根据表现形式,可以分为2类:
- (1)块元素(block);
- (2)行内元素(inline);
任何HTML元素都属于这两类中的其中一类。
一、块元素
块元素在浏览器默认显示状态下将占据整行,排斥其他元素与其位于同一行。块元素一般为矩形,可以容纳行元素和其他的块元素。
表1 常见块元素
块元素 |
说明 |
div |
div层 |
h1~h6 |
1到6级标题 |
p |
段落,会自动在其前后创建一些空白 |
hr |
分割线 |
ol |
有序列表 |
ul |
无序列表 |
这里只是列出HTML入门阶段常见的块元素。
块元素的特点是:
- (1)独占一行,排斥其他元素跟其位于同一行,包括块元素和行内元素;
- (2)块元素内部可以容纳其他块元素或行元素;
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=gb2312"/>
</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>元素内部的,也就是块元素内部可以容纳其他块元素或行元素。
二、行内元素
行内元素与块元素恰恰相反。行内元素默认显示状态可以与其他行内元素共存在同一行。
表1 常见行内元素
行内元素 |
说明 |
strong |
加粗强调 |
em |
斜体强调 |
s |
删除线 |
u |
下划线 |
a |
超链接 |
span |
常用行级,可定义文档中的行内元素 |
img |
图片 |
input |
表单 |
我们在学习完“CSS入门教程”之后再回来看一下常见块元素和常见行内元素,我们会对HTML标签有更深的了解和印象。
行内元素的特点是:
- (1)可以与其他行内元素位于同一行;
- (2)行内内部可以容纳其他行内元素,但不可以容纳块元素,不然会出现无法预知的效果;
实际例子看块元素中的例子。
这一节注重理解一个思想,而不是叫我们去记忆块元素有哪些,行内元素有哪些。到后续课程我们会给大家总结所有的块元素和行内元素。
总结
1、HTML元素根据浏览器表现形式分为两类:①块元素;②行内元素;
2、块元素特点:
- (1)独占一行,排斥其他元素跟其位于同一行,包括块元素和行内元素;
- (2)块元素内部可以容纳其他块元素或行元素;
3、行内元素特点:
- (1)可以与其他行内元素位于同一行;
- (2)行内内部可以容纳其他行内元素,但不可以容纳块元素,不然会出现无法预知的效果;