块级元素、行内元素以及它们的转换

HTML可以将大多数元素分为行内元素、块级元素这两种，并且它们是可以互相转换的。

1.行内元素

  ■特点

（1）宽高就是内容的高度，不可以改变；

（2）对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间；

（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 - 下划线

var - 定义变量

 ■img、input到底是行内元素还是块级元素？

img、input属于行内替换元素。height/width/padding/margin均可用，效果等于块元素。(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。

替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。替换元素一般有内在尺寸，所以具有width和height，可以设定。例如你不指定img的width和height时，就按其内在尺寸显示，也就是图片被保存的时候的宽度和高度。对于表单元素，浏览器也有默认的样式，包括宽度和高度。

(X)HTML 的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器）。

2.块级元素

 ■特点

（1）能够识别宽高（宽度没有设置时，默认为100%）；

（2）margin和padding的上下左右均对其有效；

（3）可以自动换行；

（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 - 非排序列表

3.行内块级元素

行内块级元素综合了行内元素和块级元素的特性，但是各有取舍。

 ■特点

（1）不自动换行；

（2）能够识别宽高；

（3）默认排列方式为从左到右。

4.块级元素和行内元素之间的转换

■display
块元素默认display:block;行内非替换元素(a,span)默认为display：inline;行内替换元素(input)默认为display:inline-block;
a.display:none;不显示该元素，也不会保留该元素原先占有的文档流位置；
b.display:block;转换为块级元素；
c.display:inline;转换为行内元素；

d.display:inline-block;转换为行内块级元素。

■float

当把行内元素设置完float:left/right后，该行内元素的display属性会被赋予block值，且拥有浮动特性。行内元素去除了之间的莫名空白。

■position
当为行内元素进行定位时，position:absolute与position:fixed.都会使得原先的行内元素变为块级元素。

参考文献：1.说说行内元素和块级元素

2.HTML行内元素、块状元素、行内块状元素的区别

3. img、input到底是行内还是块级元素？