不同的标签有什么特点？它们的使用场景是什么？
一、 概述
HTML（Hyper Text Markup Language ）作为一种标记语言，网页所有的内容均书写在标签内部，标签是组成Html页面的基本元素，因此对标签特性的理解在HTML的学习过程中比较重要。
HTML中的标签从闭合的角度可以分为闭合标签和空标签。而HTML中大部分标签都是闭合标签，其他少数为空标签，常见的空标签有<input />、 <img />、 <area />、 <base />、 <link />等。
HTML中对标签另一种分类方式，是根据标签在文档中的位置特性进行分类的，它将元素分为三类：块级元素，行内元素，行级块元素（也称块级行元素）。
1.块级元素（block）
特点： （1）可以设置宽高、内、外边距；
（2）独占一行（即前后均有换行）；
（3）块级元素如果不设置宽度和高度，则宽度默认为父级元素的宽度。高度则根据内容大小自动填充。
常见的块级元素： div、p、h1、h2......hn，ol、ul、dl、li、form、table
2.行级元素(inline)
特点： （1）不可设置宽高、上下内、外边距。（左右内、外边距设置有效）
（2）其宽度和高度由其内容自动填充。
（2）其他行级元素共处一行 ；
常见的行级元素：a、span、i、lable等
3.行内块元素（inline-block）
特点：（1）可以设置宽高、内外边距；
（2）可以与其他行内元素、内联元素共处一行；
常见的内联元素：input、img
4.元素之间的转化
可以在行内样式或css样式中改变元素的display将三种元素进行转换。
display:block；(将元素变为块级元素)
display:inline； (将元素变为行级元素)
display：inline-block；（将元素变为行级块元素）
| 块状元素 |
内联元素 |
|---|---|
| address - 地址 |
a - 锚点 |
div 和 span 有什么不同，什么时候使用 div、什么时候使用 span？
- div是块级元素，它不论大小默认占一行，而且可以设置宽高以及外边距；
- span是行内元素，它占它自身大小的位置，而且不能设置宽高以及边距；
- 同时div也可以变为span (display:inline),这样div将变为行内元素；
- span也可以变为div(display:block),这样span将变为块级元素，默认占一行，而且可以设置宽高；
- 同时，两者要想实现既可以设置宽高，边距，又可以不占一行，则display:inline-block ；
html的div和span, 经常会用到， 尤其是前者。
1. div是块级元素， 实际上就是一个区域， 主要用于容纳其他标签。 默认的display属性是block
2. span是行内元素， 主要用于容纳文字。 默认的display属性是inline
看看如下：
<html>
<body>
test<span>紧跟前面的"test"显示</span><div>而这里会另起一行显示</div>
</body>
</html>结果为：
test紧跟前面的"test"显示
而这里会另起一行显示
2个都是用来划分区间但是没有实际语义的标签,差别就在于div是块级元素,不会其他元素在同一行;span是内联元素，可以与其他元素位于同一行。
DIV 和 SPAN 元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染。主要用于应用样式表（共同点）。
两者最明显的区别在于DIV是块元素，而SPAN是行内元素(也译作内嵌元素)。
详解：1.所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行，测试一下下面的代码你会有更形象的理解：
测试<span>紧跟前面的"测试"显示</span><div>这里会另起一行显示</div>
2.块元素和行内元素也不是一成不变的，通过定义CSS的display属性值可以互相转化，如：
测试<div style="display:inline">紧跟前面的"测试"显示</div><span style="display:block">这里会另起一行显示</span> 
转载：
＜span＞SPAN标记有一个重要而实用的特性，即它什么事也不会做，它的唯一目的就是围绕你的HTML代码中的其它元素，这样你就可以为它们指定样式了。在此例中，＜span＞标识符允许你将一个段落分成不同的部分。
还有一个标识符具有类似的功能，＜div＞DIV也被用来在HTML文件中建立逻辑部分。但与＜div＞SPAN不同，＜div＞工作于文本块一级，它在它所包含的HTML元素的前面及后面都引入了行分隔。
技巧：有些朋友会说DIV是层标签，其实HTML里是没有层这个说法的，只不过是为了易于理解，Dreamweaver里才这样写的，每个对象都可以成为“层”，只需要给对象定义position属性(值为absolute或relavite)。例如，要让图片成为“层”，可以这样写代码：
<img src="demo.gif" style="posibion:absolute;left:20;top:20">
span和div
- 来源：互联网
html4规范的一大突破就是引入了一大空元素<span>和<div>。所谓空元素，就是说如果单独在页面上插入这两个元素，不会对页面产生影响，但是这两个属性专门为样式表定义而生，如果对<span>和<div>定义样式表以后，其中内容的样式旧会随之变化。
<span>和<div>元素都能处理任意大小的片断，他们之间的异同可以用一个例子来说明。
示例如下
01 <html>
02 <head>
03 <meta http-equiv="Content-Style-Type" content="text/css">
04 <title>HTML示例</title>
05 <style type="text/css">
06 .myspan1 { color: #FFFFFF; }
07 .myspan2 { color: #000000; background-color: #CCFFCC; }
08 .myspan3 { color: #FFFFFF; background-color: #000080; }
09 .myspan4 { color: #000000; background-color: #FFCCCC; }
10 .mydiv1 { color: #FFFFFF; background-color: #008000; }
11 .mydiv2 { color: #000000; background-color: #CCCCFF; }
12 .mydiv3 { color: #FFFFFF; background-color: #000000; }
13 .mydiv4 { color: #000000; background-color: #FFFFAA; }
14 </style>
15 </head>
16 <body>
17 <h2>生命必须元素</h2>
18 <span class="myspan1">水</span>
19 <span class="myspan2">维生素</span>
20 <span class="myspan3">蛋白质</span>
21 <span class="myspan4">矿物质</span>
22 <hr>
23 <div class="mydiv1">水</div>
24 <div class="mydiv2">维生素</div>
25 <div class="mydiv3">蛋白质</div>
26 <div class="mydiv4">矿物质</div>
27 </body>
28 </html>文件说明
设计者在代码中输入了4个单词，单词之间没有换行，也没有空格。然后为每一个单词嵌套上<span></span>和<div></div>元素，两种元素产生了不同的显示效果。
<span>元素包含的内容，在显示格式上没有任何变化，没有因为插入<span>元素而产生换行或者其他排版效果。这样的显示效果称为“行内元素”，设计者可以在一段文本中插入任意多对<span>元素，然后添加字体、颜色、背景、边框和边距等各种格式。
<div>元素所包含的内容，在格式上有所变化，每一个<div>元素所包含的内容都另起一行，浏览器为他们分配了一个独立区域，形成一个一个“块”，因此<div>也被称作“块级元素”。不过除了这个区别，在其他方面<span>和<div>基本相同，它们都可以为其中内容添加各种样式。
正是有了<span>和<div>两个元素的出现，使得HTML4的样式定义变得更为灵活和规范。
1、行内样式定义<span>元素
<span>属于行内样式定义元素，它的插入不会使原有结构产生任何变化，直到设计者为它提供了属性为止。
基本语法
<span 属性=“属性值></span>
<span>元素的首尾标记必须同时成对出现，且<span>元素允许多重嵌套，也就是说，一个<span>元素中可以嵌套任意多个<span>元素。
文件范例
01 <html>
02 <head>
03 <meta http-equiv="Content-Style-Type" content="text/css">
04 <title>HTML示例</title>
05 <style type="text/css">
06 p { line-height: 1.5em;
07 font-family: Tahoma; }
08 .toolname { color: #FFFFFF;
09 background-color: #AA0000;
10 cursor: hand; }
11 .helpfile { cursor: help;
12 text-decoration: underline; }
13 </style>
14 </head>
15 <body>
16 <p><span class="toolname" title="HyperText Markup Language 超文本标记语言" lang="en">HTML</span> 和 <span class="toolname" title="Cascading Style Sheet 层叠样式表" lang="en">CSS</span>都是网页制作必不可少的工具，详情请参阅<span class="helpfile" title="点击查看帮助文件" lang="zh-cn" onclick='javascript:window.open("helpfile.html");'>帮助文件</span>。
17 </body>
18 </html>文件说明
设计者对“HTML”和“CSS”两个单词使用了<span>元素，其中style元素用前景色、背景色和鼠标样式定义，同时还对于语言编码、鼠标跟踪文字提醒进行了lang和title属性定义。对于“帮助文件”4个字，设计者利用<span>元素的style属性对它定义了下划线和鼠标样式，同时也对语言解码、鼠标跟踪文字提醒进行了lang和title属性定义，onclick属性可以插入脚本，设置用户鼠标单击后的浏览器动作。
<span>除了进行文本行内定义，还可以对HTML元素和属性无法定义的地方进行样式设置。
文件范例
01 <html>
02 <head>
03 <meta http-equiv="Content-Style-Type" content="text/css">
04 <title>HTMLê?ày</title>
05 <style type="text/css">
06 li { line-height: 3em;
07 font-family: courier new;
08 font-size: 18pt; }
09 .bordered_text { border: solid 1px black;
10 padding: .5em;
11 font-weight: bold; }
12 </style>
13 </head>
14 <body>
15 <ul>
16 <li>13<span class="bordered_text">5</span>79
17 <li>02<span class="bordered_text">4</span>68
18 </ul>
19 </body>
20 </html>文件说明
利用<span>，可以在任意位置对特定字符进行样式格式化，即使字符包含在<li>中也一样。这些功能都是仅靠HTML元素本身属性无法达到的，而行内样式元素<span>可以达到这样的效果。
2、块级样式定义<div>元素
<div>属于块级样式定义元素，它的插入会使原有结构产生变化，所有<div>元素都会在新的一行产生一个文档模型定义容器，等待设计者为它 提供属性。
基本语法
<div 属性=“属性值”></div>
<div>元素的首尾标记必须同时成对出现，且<div>元素允许多重嵌套，也就是说，一个<div>元素中可以嵌套任意多个<div>元素。
文件范例
由于<div>元素是块级元素，因此可以用CSS的position属性对其进行相对或者绝对定位，一旦进行了绝对定位，一个<div>矩形区域就可以出现在一个HTML文档的任何地方。
01 <html>
02 <head>
03 <meta http-equiv="Content-Style-Type" content="text/css">
04 <title>HTMLê?ày</title>
05 <style type="text/css">
06 body { background-color: black; }
.dig1,.dig2,.dig4,.dig6,.dig7 { background-color: lime; }
.dig3,.dig5 { background-color: #003300; }
07 </style>
08 </head>
09 <body>
10 <div class="dig1" style="position:absolute; left:10; top:10; width:20; height:100;"></div>
11 <div class="dig2" style="position:absolute; left:35; top:10; width:70; height:20;"></div>
12 <div class="dig3" style="position:absolute; left:110; top:10; width:20; height:100;"></div>
14 <div class="dig4" style="position:absolute; left:35; top:102; width:70; height:20;"></div>
15 <div class="dig5" style="position:absolute; left:10; top:115; width:20; height:100;"></div>
16 <div class="dig6" style="position:absolute; left:35; top:195; width:70; height:20;"></div>
17 <div class="dig7" style="position:absolute; left:110; top:115; width:20; height:100;"></div>
18 </body>
19 </html>文件说明
该文档没有使用任何的表格和图片，但是却能模拟一个屏幕数字“5”，依靠的就是<div>元素的定位属性和样式属性。一个数字中包含7个矩形块，利用绝对定位放置在相应位置，然后用背景色属性模拟发光和变暗的效果。设计者可以修改<style>元素中的类编组，定义哪些块处于“发光”状态，哪些块处于“暗淡”状态。
如果将这些类编组防入一个脚本中，就可以在页面上模拟动态计数效果。它的优点非常明显，设计者在变化数字的时候，无需修改<body>中的具体内容，只要用样式表归类不同背景色的<div>块即可
行元素与块元素有什么不同？行元素有那些属性限制？
HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是，这三者是可以互相转换的，使用display属性能够将三者任意转换：
(1)display:inline;转换为行内元素
(2)display:block;转换为块状元素
(3)display:inline-block;转换为行内块状元素
1.行内元素
行内元素最常使用的就是span，其他的只在特定功能下使用，修饰字体<b>和<i>标签，还有<sub>和<sup>这两个标签可以直接做出平方的效果，而不需要类似移动属性的帮助，很实用。
行内元素特征：(1)设置宽高无效
(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
(3)不会自动进行换行
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="utf-8" />
6 <title>测试案例</title>
7 <style type="text/css">
8 span {
9 width: 120px;
10 height: 120px;
11 margin: 1000px 20px;
12 padding: 50px 40px;
13 background: lightblue;
14 }
15 </style>
16 </head>
17
18 <body>
19 <i>不会自动换行</i>
20 <span>行内元素</span>
21 </body>
22
23 </html>
2.块状元素
块状元素代表性的就是div，其他如p、nav、aside、header、footer、section、article、ul-li、address等等，都可以用div来实现。不过为了可以方便程序员解读代码，一般都会使用特定的语义化标签，使得代码可读性强，且便于查错。
块状元素特征：(1)能够识别宽高
(2)margin和padding的上下左右均对其有效
(3)可以自动换行
(4)多个块状元素标签写在一起，默认排列方式为从上至下
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="utf-8" />
6 <title>测试案例</title>
7 <style type="text/css">
8 div {
9 width: 120px;
10 height: 120px;
11 margin: 50px 50px;
12 padding: 50px 40px;
13 background: lightblue;
14 }
15 </style>
16 </head>
17
18 <body>
19 <i>自动换行</i>
20 <div>块状元素</div>
21 <div>块状元素</div>
22 </body>
23
24 </html>
3.行内块状元素
行内块状元素综合了行内元素和块状元素的特性，但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。
行内块状元素特征：(1)不自动换行
(2)能够识别宽高
(3)默认排列方式为从左到右
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="utf-8" />
6 <title>测试案例</title>
7 <style type="text/css">
8 div {
9 display: inline-block;
10 width: 100px;
11 height: 50px;
12 background: lightblue;
13 }
14 </style>
15 </head>
16
17 <body>
18 <div>行内块状元素</div>
19 <div>行内块状元素</div>
20
21 </body>
</html>
在HTML5中，程序员可以自定义标签，在任意定义标签中，加入display:block;即可，当然也可以是行内或行内块状。
简要说明：
1. 行内元素会再一条直线上，是在同一行的。比如span和strong;
2. 块级元素各占一行。是垂直方向的！比如div和p.
假如你要将行内元素变成块级元素，那么就只需要在该标签上加上样式 display:block; 块级元素可以用样式控制其高、宽的值，而行内元素不可以。
行内元素和width
W3C CSS2 标准规定行内元素、非置换元素不会应用width属性。
以下例子中，对行内元素<a>应用了width:200px,你可以看到，根本就没有什么效果。
行内元素和height
W3C CSS2 标准规定行内元素、非置换元素不会应用height属性，但是盒子高度可以通过line-height来指定。
以下例子，对行内元素<a>应用了height:50px,你可以看到什么效果都没。
行内元素和padding
你可以给行内元素设置padding，但只有padding-left和padding-right生效。
以下例子，行内元素<a>应用了padding:50px。你可以看到对左右的内容有影响，但是对上下没影响。
行内元素和marging
margin属性也是和padding属性一样，对行内元素左右有效，上下无效。
-
设置宽度width 无效。
-
设置高度height 无效，可以通过line-height来设置。
-
设置margin 只有左右margin有效，上下无效。
-
设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的，看图上效果就知道了
2.text-align属性是两者表现的又以不同之处
在W3C CSS2.1规范第16.2节 对text-align 有详细地描述：
------------------------------------------
值： left | right | center | justify | inherit
初始值：匿名值，由'direction'的值而定，如果'direction'为'ltr'则为'left'，如果'direction'为'rtl'则为'right'。
应用于: 块级元素，表格单元格，行内块元素
继承性: 是
计算后的值：初始值或指定值
------------------------------------------
这个特性描述了如何使一个块元素的行内内容对齐。
注意一点，标准里说这个属性是用来对齐行内内容的，所以，不应该对块级内容起作用。
解释一下，行内内容是说由行内元素组成的内容，行内元素大家都知道吧，比如 SPAN 元素，IFRAME元素和元素样式的 ‘display : inline’ 的都是行内元素；块级内容跟则是由块级元素构成，DIV 是最常用的块级元素。块级元素和行内元素的区别是，块级元素会占一行显示，而行内元素可以在一行并排显示。
这样，我们对这个特性的认识应该就清楚了。但是，虽然标准里这么规定，那么是不是所有浏览器都遵守呢？答案是否定的。猜猜是哪个浏览器这么特立独行啊？ IE！！
IE6/7及IE8混杂模式中，text- align:center可以使块级元素也居中对齐。其他浏览器中，text-align:center仅作用于行内内容上。
解决上面的问题比较好的方式，就是为所有需要相对父容器居中对齐的块级元素设置“margin-left:auto; margin-right:auto”。但这个方式 IE6/IE7/IE8的混杂模式中不支持，所以还要设置父容器的 "text-align:center;"。若居中对齐的子元素内的行内内容不需要居中对齐，则还需要为其设置“text-align:left”。
块级：1.块级元素会独占一行，默认情况下宽度自动填满其父元素宽度
2.块级元素可以设置宽高
3.块级元素可以设置margin，padding
4.display:block;
行内：1.行内元素不会独占一行，相邻的行内元素会排在同一行。其宽度随内容的变化而变化。
2.行内元素不可以设置宽高
3.行内元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom;却不能生效。
4.display:inline;
行级：1.可以和其他元素处于一行，不用必须另起一行。
2.元素的高度、宽度及顶部和底部边距不可设置。
3.元素的宽度就是它包含的文字、图片的宽度，不可改变。
修改：可以通过修改display属性来切换元素
css 样式是怎么比较优先级的？
如果有一种情况：对于同一个元素我们同时用了三种方法设置css样式，那么哪种方法真正有效呢？
1、使用内联式CSS设置“超酷的互联网”文字为粉色。
<span style="color:pink">2、然后使用嵌入式CSS来设置文字为红色。
span{
color:red;
}3、最后又使用外部式设置文字为蓝色（style.css文件中设置）。
span{
color:blue;
}但最终你可以观察到“超酷的互联网”这个短词的文本被设置为了粉色。因为这三种样式是有优先级的，记住他们的优先级：内联式 > 嵌入式 > 外部式
但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样，<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面（实际开发中也是这么写的）。感兴趣的小伙伴可以试一下，把它们调换顺序，再看他们的优先级是否变化。
其实总结来说，就是--就近原则（离被设置元素越近优先级别越高）。
但注意上面所总结的优先级是有一个前提：内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况下，什么是权值呢？
1、标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/</span>注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。
2、层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。
3、使用！important为某些样式设置最高权值
p{color:red!important;}注意：当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。这时注意样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式
使用 img 与 background-image 显示图片有什么不同？
包括：1，img与background-image区别；2，img中设置文字悬浮（利用float或绝对定位）；3，background的url网络图片链接不显示问题；4，如何理解“相对于 static 定位以外的第一个父元素进行定位”。
1.从用法上分析
1.1img标签的用法
语法：<imgsrc=""alt=""/>
Src里面为图片来源，alt表示当图片无法显示时图片位置会出现的说明性文字，在W3C标准中为必填选项，有助于辅助阅读，另外img还具有width，height，border等style属性
特点：img属于块级内联标签（个人理解为可设置宽高的inline标签，如有错误请指正）。有自闭合特性，通俗的说就是在网页中自己建一块位置自己占位。
1.2backgroun-image标签的用法
语法：background-image:url();
Url中为图片来源，通过background-position，background-size等属性来控制大小位置以及重复性等。
特点：background-image既不是Inline标签也不是block标签，无法单独使用，需要放在一个父标签里面使用，本身也是一个空标签，设置好之后作为父标签的背景。
2.img和background-image用法举例说明
2.1基本用法举例
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>img与background</title>
<style type="text/css">
img{
width: 300px;
height: 150px;
border: 1px solid black;
}
div{
width: 300px;
height: 150px;
background-image: url(http://www.siaa.org.cn/Uploads/Editor/2015-06-19/5583bfebd6e71.jpg) ;
background-repeat: no-repeat;
background-size:300px 150px ;
border: 1px solid black;
}
</style>
</head>
<body>
<img src="http://www.siaa.org.cn/Uploads/Editor/2015-06-19/5583bfebd6e71.jpg"/>
<hr />
<div></div>
</body>
</html>效果如下图所示：
注意几点：
（1）background-image与background是有区别的，background-image后面只能跟图片路径，需要另外设置background-repeat和background-size，而background是一个复合写法，后面可以跟url，no-repeat，位置等。这就是为什么background的url网络图片链接不显示的来源。
（2）background-image只有父级设置了宽高，图片才会显示出来，而且background-size如果没有设置的话会显示默认宽高，如果只设置了一个值，另外一个值会随着图片大小比例自动调整。
2.2使文字悬浮在background-image与img上面的方法
在实际使用过程中，有时我们需要把文字浮在图片之上，对于使用background-image添加图片时，只需在background-image所在父级元素内写上文字即可。如下所示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>img与background</title>
<style type="text/css">
div{
width: 300px;
height: 150px;
background-image: url(http://www.siaa.org.cn/Uploads/Editor/2015-06-19/5583bfebd6e71.jpg) ;
background-repeat: no-repeat;
background-size:300px 150px ;
border: 1px solid black;
}
</style>
</head>
<body>
<div><p>CSDN是全球最大的中文IT社区</p></div>
</body>
</html>效果：
当使用img来添加图片时，一般有两种方法设置文字悬浮于图片上方
2.1设置img和p为浮动样式，并为p(或img)设置margin值
举例说明：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>img与background</title>
<style type="text/css">
img{
width: 300px;
height: 150px;
border: 1px solid black;
float: left;
}
p{
float: left;
margin-left: -300px;
}
</style>
</head>
<body>
<img src="http://www.siaa.org.cn/Uploads/Editor/2015-06-19/5583bfebd6e71.jpg"/>
<p>CSDN是全球最大的中文IT社区</p>
</body>
</html>效果：
当img和p都设置浮动之后，由于img非空标签，p中文字会跟img在同一行但是不会显示在img上方，此时需要设置margin负值使其到指定位置。
2.2使用position绝对定位
此时，需要考虑body里面的文字位于img的前面和后面的两种情况
2.2.1举例说明body中的文字位于img前面的情况
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>img与background</title>
<style type="text/css">
.img1{
width: 300px;
height: 150px;
border: 1px solid black;
position: absolute;
left: 1px;
top: 1px;
z-index: -1;
}
</style>
</head>
<body>
<p class="pone">CSDN是全球最大的中文IT社区</p>
<img src="http://www.siaa.org.cn/Uploads/Editor/2015-06-19/5583bfebd6e71.jpg" class="img1"/>
</body>
</html>效果：
说明1：文档流在默认状态下（无定位）的堆叠值z-index是递增的，而对于火狐浏览器z-index值默认初始为auto，对于ie浏览器默认为0，所以img的z-index值要比p高，若想p显示在上面，则需要设置img的z-index为一个比p低的值，经测试img的z-index为-1时刚好合适（因为火狐浏览器z-index值是auto，个人理解为未知值）
说明2：为什么不在p上设置z-index呢？其实在p上也可以设置z-index，不过也要在img上设置z-index，因为上面说过文档流的z-index是递增的，p设置之后，img就自动具备了一个比p高的z-index值，此时需要设置img的z-index小于p的z-index值即可。相对于直接在img上设置z-index，是不是显得麻烦一些呢。
说明3：默认状态下，img应位于p下方，现对img设置绝对定位，绝对定位参考对象为“相对于static定位以外的第一个父元素进行定位”，（怎么理解这句话呢，就是说相对父级及父级以上第一个有relative或者absolute定位的祖先元素进行定位，如果没有，就相对body进行定位，此处img就是相对body进行定位），定位之后的img就位于p层上面了；
2.2.2举例说明body中文字位于img后面的情况
在body中，文字img前面时，我们需要把img强制“塞到”p下面，而当文字在img后面时，需要把p“放在”img上面，P的z-index值本来就比img高，因此不需设置z-index值即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>img与background</title>
<style type="text/css">
.img1{
width: 300px;
height: 150px;
border: 1px solid black;
}
.pone{
position: absolute;
left: 10px;
top: 1px;
}
</style>
</head>
<body>
<img src="http://www.siaa.org.cn/Uploads/Editor/2015-06-19/5583bfebd6e71.jpg" class="img1"/>
<p class="pone">CSDN是全球最大的中文IT社区</p>
</body>
</html>可见会产生类似的效果：
2.3为什么不使用相对定位代替绝对定位
因为相对定位元素转移之后，其原来的位置还被占着，后面元素无法填充，举例说明：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>img与background</title>
<style type="text/css">
.img1{
width: 300px;
height: 150px;
border: 1px solid black;
}
.pone{
position: relative;
left: 10px;
top: -170px;
}
</style>
</head>
<body>
<img src="http://www.siaa.org.cn/Uploads/Editor/2015-06-19/5583bfebd6e71.jpg" class="img1"/>
<p class="pone">CSDN是全球最大的中文IT社区</p>
<p class="ptwo">CSDN是全球最大的中文IT社区</p>
</body>
</html>效果如图：
可见当pone通过相对定位转移到相对位置，后面的ptwo无法填充起留下位置，在实际中并不实用。
3．从浏览器解析机制上分析
img属于html的标签，而background-image属于css样式，所以浏览器在解析时，会优先加载img标签，之后才会加载background-image，对于比较重要的图像，如logo，可使用img标签进行导入，这样会优先显示出来。