行内元素和块级元素

一、概念 

介绍一下行内元素和块级元素，这个很重要，因为有的属性只能用于块元素，而有的正好相反，在一定的情况下，它们也可以相互转换，比如用display来进行设置。

        行内元素(又叫内联元素inline element):

　　①不占据一整行，随内容而定，有以下特点：

　　②不可以设置宽高，也不可以设置行高，其宽度随着内容增加，高度随字体大小而改变。

　　③内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用。

　　④也可以设置内边界，但是内边界在ie6中不对上下起作用，只能对左右起作用。

　　常用的内联元素有：

　　a - 锚点，b - 粗体(不推荐)，br - 换行，em - 强调，font - 字体设定(不推荐)，i - 斜体，img - 图片，input - 输入框，label - 表格标签，select - 项目选择，small - 小字体文本，span - 常用内联容器，定义文本内区块，strike - 中划线，strong - 粗体强调  u - 下划线

        块级元素（block element）：

　　①总是在新行上开始，占据一整行;

　　②高度，行高以及外边距和内边距都可控制;

　　③宽带始终是与浏览器宽度一样，与内容无关;

　　④它可以容纳内联元素和其他块元素。

　　常用的块级元素有：

　　div -最常用的块级元素，dl - 和dt dd搭配使用的块级元素，form - 交互表单，h1 - 大标题，hr - 水平分隔线，ol - 排序表单，p - 段落，ul - 非排序列表 

二、转换

互相转换：使用display设置可以使得行内元素拥有块级元素的特性，反之也可以。

　　如：

1. <p style="display:inline; text-align:center">我是被设置了内联的块元素p，我现在的表现形式和内联元素一样啦</p>
   
2. <span style="display:block; text-align:center">我是被设置了块级元素的span，我现在可以独占一行并且可以设置宽高</span>

复制代码

display: table-cell ，能把元素当作表格单元来显示，这个非常实用，显示效果也很好，只可惜某些浏览器不够兼容。要注意，和一个合法的<td>元素必须在<table>里一样，display: table-cell 元素必须作为 display: table 的元素的子元素出现。