行内、块级、行内块元素一览

一、标签的类型

HTML标签常见类型：块元素和行内元素。

二、行内元素（inline-level）

行内元素也称为内联元素，行内元素不占有独立区域，其大小仅仅被动的依赖于自身内容的大小（例如文字和图片），所以一般不能随意设置其宽高、对齐等属性。常用于控制页面中文本的样式。

行内元素特点：

1. 总是和相邻的行内元素在同一行上。
2. 设置宽高无效，水平方向的padding和margin属性可以设置，但是垂直方向上的无效。
3. 默认宽度是他自身内容的宽度。
4. 行内元素只能容纳其他行内元素或者文本。

常见行内元素：
a – 锚点
abbr – 缩写
acronym – 首字
b – 粗体(不推荐)
bdo – bidi override
big – 大字体
br – 换行
cite – 引用
code – 计算机代码(在引用源码的时候需要)
dfn – 定义字段
em – 强调
font – 字体设定(不推荐)
i – 斜体
img – 图片
input – 输入框
kbd – 定义键盘文本
label – 表格标签
q – 短引用
s – 中划线(不推荐)
samp – 定义范例计算机代码
select – 项目选择
small – 小字体文本
span – 常用内联容器，定义文本内区块
strike – 中划线
strong – 粗体强调
sub – 下标
sup – 上标
textarea – 多行文本输入框
tt – 电传文本
u – 下划线

Html样式：

1. <span>行内元素1</span>

2. <span>行内元素2</span>

三、块级元素（block-level）

块元素会独自占据一整行，或者多行，可以任意设置其大小尺寸，是用于搭建网页布局的必须部分，使网页结构更加紧凑合理。

块级元素特点：

1. 总是另起一行。
2. 可以设置其宽度、高度，内外边距。
3. 在不手动设置宽度的情况下，宽度默认为所在容器的100%（容器宽度）。
4. 可以容纳行内元素和其他块元素。

常见块级元素：
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 – 无序列表

Html样式：

1. <div>块级元素1</div>

2. <div>块级元素2</div>

四、行内块元素（inline-block）

普遍的规则里总有那么几个不一样的，在行内元素中就有那么几个特殊标签，比如<img>/<input>/<td>,可以给他们设置宽高、对齐属性，我们把这样特殊的一类标签称为行内块元素。行内块元素综合了块元素和行内元素的不同特点。

行内块元素的特点：

1. 和相邻行内元素在同一行，但是之间会有空白缝隙。
2. 默认宽度是他本身内容的宽度。
3. 宽度、高度、行高、外边距以及内边距都可以手动设置。

特殊：结合行内元素和块级元素的特点

Html样式：

1. <input type="text" value="行内块元素1"> 

2. <input type="text" value="行内块元素2">

五、标签显示模式转换（display）

为满足各种需求，利用display进行转换。

——》块级元素： display:block;

——》行内元素 ： display:inline;

——》行内块元素： display: inline-block