5、HTML块级元素及行内元素

在 HTML 中，标签（tag）通常又被称作元素（element）。例如 <a> 标签又叫做 <a> 元素，<p> 标签也叫作 <p> 元素。

HTML 元素根据其表现形式可以分为 2 种：

块级元素
行内元素

任何 HTML 元素都属于这两者中的任意一种。

提示：块级元素和行内元素的概念极其重要，同时也是学习 CSS 的基础知识之一，请读者不要忽略。

1. 块级元素

块级元素（block element）在浏览器中占据整行，并排斥其它元素与其位于同一行。也就是说，块级元素的宽度是 100%。常见的块级元素如下：

块级元素：

div 最典型的块元素
p 表示段落
h1-h6 表示1-6级标题（默认加粗）
br 表示换行
ol 有序列表
ul 无序列表
行内元素
行内元素又称内联元素（inline block）。在浏览器中可以与其它行内元素共占一行，只有当多个元素的总宽度大于浏览器的宽度时，才会换行显示。常见的行内元素如下表：

2. 行内元素

行内元素又称内联元素（inline block）。在浏览器中可以与其它行内元素共占一行，只有当多个元素的总宽度大于浏览器的宽度时，才会换行显示。常见的行内元素如下：

行内元素：

a 超链接
span 常用行级
strong 加粗，强调
b 加粗，不强调
em 斜体，强调
i 斜体，不强调
img 图片
input 输入框
select 下拉列表

实例演示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>块元素与行内元素</title>
</head>
<body><div>div标签（块级标签）</div><p>p标签（块级标签）</p><span>span标签（行内标签）</span><a href="#">a标签（行内标签）</a>
</body>
</html>

在浏览器中运行效果如下图：

通过运行结果可以发现，<div> 标签和 <p> 标签分别独占一行，因为它们是块级元素；而 <span> 标签和 <a> 标签在同一行中显示，因为它们是行内元素。

注意，这里我们说的独占一行是指元素在浏览器中的运行效果，并不是在编辑器中独占一行。在编辑器中，不论怎么书写代码，都不会影响它在浏览器中的运行效果。

3. 元素的嵌套

HTML 中的各个元素之间是可以互相嵌套的，例如：

块元素可以嵌套块元素
块元素可以嵌套行内元素
行内元素可以嵌套行内元素
行内元素可以嵌套块元素

值得注意的是我们不建议在行内元素中嵌套块元素，这样不仅不符合开发规范，还会导致行内元素也独占一行。

下面来看一段元素之间互相嵌套的代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>元素间的嵌套</title>
</head>
<body><!-- 块级元素嵌套块级元素 --><div><p>p标签（块级元素）</p><div>div标签（块级元素）</div></div><!-- 块级元素嵌套行内元素 --><div><span>span标签（行内元素）</span></div><!-- 行内元素嵌套 --><span><span>span标签（行内元素）</span><a href="#">a标签（行内元素）</a></span>
</body>
</html>

4. 总结

块级元素的宽度是 100%，在浏览器中默认独占一行。
行内元素在浏览器中默认与其它行内元素共占一行。只有当多个行内元素的总宽度大于浏览器的宽度时，才会换行显示。
块级元素内部可以嵌套块级元素或行内元素。
建议行内元素里面只嵌套行内元素。

5、HTML块级元素及行内元素相关推荐

css标签显示特性（块级元素、行内元素、行内块元素、标签显示模式转换display、简单文字居中、简单导航栏案例）
HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素. 标签以什么方式进行显示,比如div 自己占一行, 比如span 一行可以放很多个 1. 块级元素(block-level) 常 ...
CSS里常见的块级元素和行内元素
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为"block&q ...
CSS样式----块级元素和行内元素
块级元素:div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table 行内元素:s ...
[HTML/CSS]盒子模型，块级元素和行内元素
目录概述盒子模型块级元素行内元素可变元素总结概述在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项 ...
CSS块级元素和行内元素
1. 宽高 width:数值; height:数值; 也可用百分比! 长高的设置不会被后代继承 2. 背景 (1)背景颜色 background-color:颜色值; 元素的背景颜色默认为transp ...
块级元素和行内元素的区别
块级元素和行内元素的区别: 1.块级元素会独占一行,其宽度自动填满其父元素宽度行内元素不会独占一行,相邻的行内元素会排列在同一行里,知道一行排不下,才会换行,其宽度随元素的 ...
继承性和层叠性权重盒模型 padding(内边距) border(边框) margin 标准文档流块级元素和行内元素...
内容总结: 1.继承性和层叠性继承性: 像一些文本的属性: color,text-*,line-*,font-* 这些属性是可以继承下来的2.层叠性就是权重 ,谁的权重大就显示谁的属性如何看权重:就 ...
22 块级元素和行内元素
学习的初期,我们就要知道,标准文档流等级森严.标签分为两种等级: 行内元素块级元素比如h1标签和span,同时设置宽高,来看浏览器效果,那么你会发现: 行内元素和块级元素的区别:(非常重要) 行内 ...
css块元素与行内元素特点,CSS区分块级元素和行内元素
块级元素(块级元素一般当做容器使用,既可以容纳内联元素也可以容纳块级元素) 特点: 1.每个块级元素都是独自占一行,其后的元素也只能另起一行,并不能两个元素共用一行. 2.元素的高度.宽度.行高和顶底 ...