4.9 块元素和行内元素

作者(helicopter)
赞(95)
浏览(45789)
说明:原创教程，禁止转载

块元素和行内元素，这个概念极其重要，这同时也是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>

在浏览器预览效果如下：

HTML块元素和行内元素