常见的内联元素(inline)和块级元素(block)

 

内联元素(inline)：

a – 锚点 
abbr – 缩写 
acronym – 首字 
b – 粗体(不推荐) 
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 – 下划线

块级元素(block)：

address – 地址 
blockquote – 块引用 
center – 举中对齐块 
dir – 目录列表 
div – 常用块级容易，也是CSS layout的主要标签 
dl – 定义列表 
fieldset – form控制组 
form – 交互表单 
h1 – 大标题 
h2 – 副标题 
h3 – 3级标题 
h4 – 4级标题 
h5 – 5级标题 
h6 – 6级标题 
hr – 水平分隔线 
menu – 菜单列表 
ol – 有序表单 
p – 段落 
pre – 格式化文本 
table – 表格 
ul – 无序列表 
li

内联元素与块级元素的区别

内联元素：

1、内联元素不会独占一行，相邻的内联元素会排在同一行。其宽度随内容的变化而变化。 
2、内联元素不可以设置宽高 
3、内联元素可以设置margin，padding，但只在水平方向有效。

块状元素：

1、块级元素会独占一行，默认情况下宽度自动填满其父元素宽度 
2、块级元素可以设置宽高 
3、块级元素可以设置margin，padding

内联块状元素inline-block：

简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现（可以设置宽高和margin值）。之后的内联对象会被排列在同一内联。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

关联：

可以通过修改display属性来切换块级元素和内联元素 
块级：display:block; 
内联：display:inline;