Joeliawu

HTML块级元素与行内元素(内联元素)的区别

最近所接手的一个项目是一个前后端分离的项目,因为公司暂时抽调不出前端支援这个项目,所以我被临时抽调在这个项目中充当一个前端开发的一个角色.由于之前做过一年多的J2EE开发,所以对于前端开发还是很快能上手的.只是因为之前的html、css常用标签与用法在脑海里面已经很模糊了,所以导致在开发的过程中经常是不明其所以然,一个标签一个标签的、一个属性一个属性的试,导致开发效率极低,所以我打算趁国庆假期开始好好的复习巩固下,废话不多说,开始正文.

一.块级元素与行内元素的区别

1.1 在标准文档流里面，块级元素具有以下特点：

(1).块级元素总是在新行上开始，占据一整行，其宽度自动填满其父元素宽度,垂直向下排列.(注:若想使其水平方向排序，可使用左右浮动（float:left/right）让其水平方向排列.)

(2).块级元素可以设置宽高,并且宽度高度以及外边距,内填充都可随意控制.(注:块级元素即使设置了宽度，仍然是独占一行的)

(3).块级元素可以包含行内元素和其他块级元素.

1.2 在标准文档流里面，行内元素具有以下特点：

(1).行内元素和其他行内元素都会在一条水平线上排列，都是在同一行的

(2).行内元素不可以设置宽高，宽度高度随文本内容的变化而变化，但是可以设置行高（line-height），同时在设置外边距margin上下无效，左右有效，内填充padding可以随意控制；

(3).行内元素不能包含块级元素，只能容纳文本或者其他行内元素.

二.块级元素与行内元素的相互转换

行内元素与块级函数可以相互转换，通过修改display属性值来切换块级元素和行内元素，行内元素display：inline，块级元素display：block。

2.1 块级元素转换为行级元素：

2.2 行级元素转换为块级元素：

三.块级元素与行内元素的分类

3.1 常见块级元素与行内元素的分类：

3.2 基本块级元素与行内元素的分类：

html中的块级元素：


标签	描述
	定义地址。
	定义文章。
	定义页面内容之外的内容。
	定义声音内容。
	定义长的引用。
	定义图形。

定义表格标题。
	定义定义列表中项目的描述。
	定义文档中的节。
	定义定义列表。
	定义定义列表中的项目。
	定义元素的细节。
	定义围绕表单中元素的边框。
	定义 figure 元素的标题。
	定义媒介内容的分组，以及它们的标题。
	定义 section 或 page 的页脚。
	定义供用户输入的 HTML 表单。
to	定义 HTML 标题。
	定义 section 或 page 的页眉。
	定义水平线。
	定义 fieldset 元素的标题。
	定义列表的项目。
	定义命令的列表或菜单。
	定义预定义范围内的度量。
	定义导航链接。

HTML块级元素与行内元素(内联元素)的区别

to