块级元素、行内元素、行内块元素以及三种模式的相互转换

常见的块元素 ：

<div> 标签是最典型的块元素。

块级元素的特点 ：

注意：

文字类的元素内不能放块级元素
p和 h1-h6是文字类的块级元素

常见的行内元素：

<span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素的特点：

行内块元素是一种行内元素，只是对一些比较特殊的行内元素的再次分类，实际上官方文档上并没有这样的区分

常见的行内块标签 ：

它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

行内块元素的特点 ：

学习元素显示模式的主要目的就是分清它们各自的特点，当我们网页布局的时候，在合适的地方用合适的标签元素。

加上：
display:block;
width:200px;
height:100px;
另外你的bg不用这样写。
写成：
background: url(/images/iconsgif) 0px -285px;
就可以了。

区别：

1块级元素可以设置宽高，行级元素不能设置宽高（只能根据文字来设置，比较特殊的是img\input是可以设置宽高）；

 2块级元素是独占一行，行级元素不行；

转化：

1display:inline;//将块级元素转化为行级元素，这时块级元素设置的宽高无效

 2display:block;//将行级元素转块级元素，这时原本的行级元素会变成块级元素独占一行，同时可以设置宽高

 3display:inline-block;//将行级元素转块级元素，不会独占一行，可以设置宽高

这是因为超链接默认是行内元素，用CSS设置起高度是不起作用的，需要将其强制转换成块级元素，即在超链接的样式里加上display:block;然后就可以设置高度了，不过别忘了还要设置相应的宽度，不然它会占满一行。另外如果你的超链接是水平放置的话，需要加上float属性，加上float属性后，元素直接就转换成块级元素，所以display就可以省去不写了。

CSS中常见的块级元素：<div>、<p>、<h1><h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>。

块级元素的特点：

每个块级元素都是独自占一行，其后的元素也只能另起一行，并不能两个元素共用一行。元素的高度、宽度、行高和顶底边距都是可以设置的。元素的宽度如果不设置的话，默认为父元素的宽度。

行级元素的特点：

可以和其他元素处于一行，不用必须另起一行。元素的高度、宽度及顶部和底部边距不可设置。元素的宽度就是它包含的文字、的宽度，不可改变。

：行级元素与块级元素的转换

可以在css样式中用display:inline将块级元素设为行级元素，同样，也可以用display:block将行级元素设为块级元素。（资料参考：网页链接）

---