块状元素和行内元素及其区别
一、常见的块状元素
<ol> 有序列表 <ul> 无序列表
<h1>...<h6> <p> <blockquote> 段落缩进 前后5个字符
<address> <caption> <div>
<header> <nav> <footer> 头部尾部
<dl> <dt> <form> 表单
<table> <tr> <td> 表格
<pre>预格式化 <marquee>滚动文本
二、常见的行内元素
textarea - 多行文本输入框 img - 图片 input - 输入框 span - 常用内联容器，定义文本内区块
abbr - 缩写 acronym - 首字 dfn - 定义字段 kbd - 定义键盘文本
samp - 定义范例计算机代码 tt - 电传文本 small - 小字体文本 select - 项目选择
var - 定义变量 em - 强调 q - 短引用 cite - 引用
code - 计算机代码(在引用源码的时候需要) font - 字体设定(不推荐) i - 斜体
br - 换行 label - 表格标签 big - 大字体 strong - 粗体强调
u - 下划线 s - 中划线(不推荐) strike - 中划线 sub - 下标
del 删除线 b - 粗体(不推荐) sup - 上标
三、块状元素、行内元素、行内块状元素的区别
块状元素特征：display :inline
- 能够识别宽高
- margin和padding的上下左右均对其有效
- 可以自动换行
- 多个块状元素标签写在一起，默认排列方式为从上至下
行内元素特征：display:block;
- 设置宽高无效
- 对margin仅设置左右方向有效，上下无效；
- padding设置上下左右都有效，即会撑大空间
- 不会自动进行换行
行内块状元素特征：display: inline-block;
- 不自动换行
- 能够识别宽高
- 默认排列方式为从左到右
四：行内元素、行内块状元素的缝隙问题
会出现间隙的原因，其实是行内标签元素，行内块元素之间的换行带来的影响。只要解决了换行的问题，也就解决了间隙的问题。
方法1：
<body>
<body>
<style>
span { background:red; }
</style>
<span>行内元素</span><span>行内元素</span><span>行内元素</span>
</body>
方法2：
<body>
<style>
span { background:red; }
</style>
<span>行内元素</span
><span>行内元素</span
><span>行内元素</span>
</body>
方法3：
<body>
<style>
span { background:red; }
</style>
<span>
行内元素</span><span>
行内元素</span><span>
行内元素</span>
</body>
方法4：
<style>
span { background:red; font-size:16px;}
</style>
<body>
<span>行内元素
<span>行内元素
<span>行内元素
</body>
方法5（将父级的font-size:0;）
<style>
body { font-size:0; }
span { background:red; font-size:16px;}
</style>
<body>
<span>行内元素</span>
<span>行内元素</span>
<span>行内元素</span>
</body>
方案五在IE7,及IE7下还是会出现间隙。在safari浏览器下也会出现间隙。
参考文章：
