HTML内联元素和块级元素

94185 阅读 0 评论 1 点赞

HTML 标签（元素）可以分为两个类别，分别是块级元素和内联元素（也叫行内元素）。

一、内联元素（inline）

1. 内联元素的概念

内联元素(html规范中的概念)英文:inline element，其中文叫法有多种，如：内联元素、内嵌元素、行内元素、直进式元素等。基本上没有统一的翻译。另外提到内联元素，通常会涉及到的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界问题。

2. 内联元素的特性

①和相邻的内联元素在同一行;

②宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变;

③宽度就是它的文字或图片的宽度，不可改变

④内联元素只能容纳文本或者其他内联元素

对于行内元素的使用，需要注意如下几点：

• 设置宽度 width 无效；

• 设置高度 height 无效，但可以通过 line-height 来设置行高；

• 可以设置 margin 外边距，但只对左右外边距有效，上下无效；

• 设置 padding 内边距时，只有左右 padding 有效，上下则无效，需要注意的是元素范围是增大了，但是对元素周围的内容是没影响的；

• 可以通过 display 属性将元素在行内元素和块级元素之间进行切换。

3. HTML标签中常见的内联元素

二、块级元素（block）

1. 块级元素的概念

块级元素(block element)，和其对应的是内联元素(inline element)，都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始，相邻的块级元素将会在不同行显示。

2. 块级元素的特性

①总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;

②宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

③如果省略块级元素的宽度，那么它的宽度默认为当前浏览器窗口的宽度；

④块级元素中可以包含其它的内联元素和块级元素。

3. HTML标签中常见的块级元素

address	地址
blockquote	块引用
center	居中对齐块
dir	目录列表
div	常用块级容器，也是css layout的主要标签
dl	定义列表
fieldset	form控制组
form	交互表单
h1	大标题
h2	副标题
h3	3级标题
h4	4级标题
h5	5级标题
h6	6级标题
hr	水平分隔线
isindex	input prompt
menu	菜单列表
noframes	frames可选内容，(对于不支持frame的浏览器显示此区块内容)
noscript	可选脚本内容(对于不支持script的浏览器显示此内容)
ol	排序表单
p	段落
pre	格式化文本
table	表格
ul	非排序列表(无序列表)