前端面试题-行内元素和块级元素
一、行内元素
一个行内元素只占据它对应标签的边框所包含的空间。
二、块级元素
块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。通常浏览器会在块级元素前后另起一个新行。
三、行内元素示例
HTML
CSS
Example
四、块级元素示例
HTML
CSS
Example
五、行内元素的特点
5.1 和其他元素都在同一行上
5.2 高，行高及外边距和内边距不可改变
5.3 宽度就是它的文字或图片的宽度，不可改变
5.4 行内元素只能容纳文本或者其他行内元素
5.5 设置行内元素，需要注意如下
（1）设置宽度 width 无效。
（2）设置高度 height 无效，但可以通过 line-height 来设置。
（3）设置 margin 只有 左右有效，上下无效。
（4）设置 padding 只有 左右有效，上下无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。
六、块级元素的特点
6.1 总是在新一行开始
6.2 高度，行高以及外边距和内边距都可改变
6.3 若宽度没有设置，则默认宽度为容器的100%，除非设定一个宽度
6.4 块级元素可以容纳行内元素和其他块级元素
七、行内元素和块级元素对比
7.1 内容
（1）一般情况下，行内元素只能包含数据和其他行内元素。
（2）而块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。
7.2 格式
默认情况下，行内元素不会以新行开始，而块级元素会新起一行。
7.3 宽高
（1）行内元素不可以设置宽高
（2）块级元素可以设置宽高
7.4 内边距和外边距
（1）行内元素水平方向的 margin 和 padding 可以生效。但竖直方向的 margin 和 padding 不能生效。
（2）块级元素可以设置margin，padding
八、行内元素列表
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 | 下划线 |
九、块级元素列表
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 | 无序列表 |
十、可变元素
可变元素为根据上下文语境决定该元素为行内元素或者块级元素。
applet | java applet |
|---|---|
button | 按钮 |
del | 删除文本 |
iframe | inline frame |
ins | 插入的文本 |
map | 图片区块(map) |
object | object对象 |
script | 客户端脚本 |
十一、行内元素和块级元素的转换
11.1 display
（1）行内元素 display:inline
（2）块级元素 display:block
（3）行内块元素 display:inline-block
（4）行内元素转换块级元素 display:block
（5）块级元素转换行内元素 display:inline
11.2 float
若设置行内元素 float:left/right，则该行内元素转换为块级元素 ，且具有浮动特性。
11.3 position
若为行内元素进行定位，position:absolute 或者 position:fixed 都会把行内元素转换为块级元素。