HTML块级元素、行内元素和行内块元素

HTML块级元素、行内元素和行内块元素

块元素，行内元素和行内块元素之间的转换

​ HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。这三者是可以互相转换的，使用display属性能够将三者任意转换：

1. display:inline;转换为行内元素
　　1. display:block;转换为块状元素
　　1. display:inline-block;转换为行内块状元素

块级元素

​ 块级元素占据其父元素（容器）的整个水平空间，垂直空间等于其内容高度，因此创建了一个“块”。通常浏览器会在块级元素前后另起一个新行。块级元素只能出现在元素内。

块级元素特点：

1. 宽度默认与父级相同
2. 独占一行,可以自动换行
3. 可设置宽高
4. margin和padding的上下左右都对其有效
5. 多个块状元素标签写在一起，默认排列方式为从上至下
6. 注：p标签、h、dt等文字类标签内最好不要放块级元素

块级元素列表:

元素	描述
	联系方式信息
	文章内容
	伴随内容
	块引用
	定义列表中定义条目描述
	文档分区
	定义列表
	表单元素分组
	图文信息组标题
	图文信息组
	区段尾或页尾
	表单
, , , , ,	标题级别 1-6
	区段头或页头
	标题组
	水平分割线
	有序列表
	段落
	预格式化文本
	一个页面区段
	表格
	无序列表
	列表条目

行内元素

​ 一个行内元素只占据它对应标签的边框所包含的空间。

行内元素特点：

1. 不可以设置宽高
2. 不会自动换行，一行内显示
3. 默认宽度是内容宽度
4. padding值上左右下有效会撑大其所占空间；margin值只左右有效
5. 行内元素内最好不放块级元素。但a标签内可以放块级元素，最好a标签转化成display：block比较安全，以免网页布局紊乱

行内元素列表:

• b,big,i,small,tt
• abbr,acronym,cite,code,dfn,em,kbd,strong,samp,var
• a,bdo,br,img,map,object,q,script,span,sub,sup
• button,input,label,select,textarea

行内块元素

​ 行内块状元素综合了行内元素和块状元素的特性，但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。

行内块元素特点：

1. 可设置宽高
2. 不自动换行，一行内显示
3. 默认排列方式为从左到右
4. 默认为本身内容宽度（高度），排列有缝隙，会因挤压而换行

行内块元素列表：

• img：用于标记网页中的图像 ，有属性src:图片资源路径 ，alt:提示信息 当图片加载失败 ，以指定文本形式代替图片显示
• input：输入框，有属性type输入框类型
• label：和input标签绑定到一块使用，有属性for，属性值就是input输入框的id值。checked属性为标签选中状态
• select：下拉列表
• textarea：定义多行的文本输入控件
• button：按钮
• td：标签定义表格中标准单元格

---

块级元素与行内元素

块级元素与行内元素有几个关键区别：

• 格式

  默认情况下，块级元素会新起一行。

• 内容模型

  一般块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。

HTML 标准中块级元素和行内元素的区别至高出现在 4.01 标准中。在 HTML5，这种区别被一个更复杂的内容类别 (en-US)代替。”块级“类别大致相当于 HTML5 中的流内容 (en-US)类别，而”行内“类别相当于 HTML5 中的措辞内容 (en-US)类别，不过除了这两个还有其他类别。

行内元素与块级元素对比

• 内容

  一般情况下，行内元素只能包含数据和其他行内元素。 而块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。

• 格式

  默认情况下，行内元素不会以新行开始，而块级元素会新起一行。