不同的标签有什么特点?它们的使用场景是什么?
一、 概述
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标签进行导入,这样会优先显示出来。