IT技术教程 | 加入收藏 |
站长工具: it问吧 百度指数添加 综合查询吧 QQ空间背景音乐查询

Div+CSS教程系列16:关于html块级元素和行内元素的一些不得不知

2014-06-27 11:33来源: 【cms学习好站】 作者:zcp 点击:

在本节开始之前,我想特别提醒一下大家,虽然这一节的说得有点多,但是其中说到的东西都是以后你们要经常面对的问题,所以务必认真看完。

看完前面的10多期div+css教程系列后,我想你只要认真看了,并且认真去理解了,那么现在自己用div+css制作一个简单的网页应该不是什么难题。

但是大家在写一个复杂一点的页面HTML结构时,我想肯定或多或少还是会有一些问题,所以这一节中就具体说一下html结构中新手容易犯,而且犯了之后还不知道是什么原因引起的一个错误,就是块级元素和行内元素在html结构中的一些关系。

至于什么是块级元素和行内元素,这个我想有点基础的人都知道,块级元素,通过字面意义就可以看出其实它就是一个块,既然是一个块,肯定可以设置高度和宽度,但是如果你不给它设置宽度的情况下,它的宽度是包含它的那个容器的百分之百,在没有CSS对其进行控制的情况下,每一个块在浏览器中显示时都将以新的一行开始,也就是说如果没有使用CSS样式的情况下,一个块元素不可能跟另一个块元素并排处在同一行。块元素中可以嵌入其它块元素或者行内元素,当然,某些特殊的块元素中是不能嵌入块元素的,比如:p元素、h1-h6。

div是我们在网页制作过程中用得最多的块元素之一。

当然,块级元素和行内元素是可以通过CSS样式来互相转换的,也就是说一个html结构中的块元素我们可以通过CSS样式的控制,让浏览器在解析它的时候认为它是一个行内元素,同样的道理,一个html结构中的行内元素我们也可以通过CSS样式的控制,让浏览器在解析它的时候把它当成一个块级元素来解析。关于互相转换这个问题,我们下节课再来讲解,这节课就暂时不讲了。

至于具体的哪些html标签是属于块级元素呢,这个问题大家自己去百度一下,其实也不是很多,20来个的样子。

关于行内元素,另一种叫法也叫内联元素。跟块级元素的差异就在于:它在浏览器中显示时不会以新的一行开始,它的宽和高也不可控制,它的宽高是由它内部的文字或图片来决定的,上下边距不可控制,但左右边距可控制,行内元素中只能嵌入其它行内元素,不能嵌入块元素,常用的行内元素有span ,b,em,a等

至于具体的哪些html标签是属于行内元素呢,这个问题也留给大家自己去百度一下。

接下来我们进入今天的主题,我来说说我们在用html时,经常遇到的一些关于行内元素和块元素方面的问题。其实知道自己犯了什么问题后,解决起来并不难,但问题就在于,很多时候我们犯了错,却并不知道。所以我希望大家在认真看完这篇文章后,以后在使用html和CSS制作网页时,不要再犯同样的错误。

首先来看一个在新手中很常见的问题,我们先看一段代码:

<p><span>我是一个行内元素</span><span>我也是一个行内元素</span></p>
<p><div>我是一个块元素</div><div>我也是一个块元素</div></p>
<h1><div>我是一个块元素</div><div>我也是一个块元素</div></h1>

在上面的三行代码中,真正符合xhtml标准的只有第一条,当然,我们在实际运用中,特别是新手,在写xhtml结构时并没有完全遵循xhtml标准,因为即使你不完全遵循xhtml标准来嵌套xhtml标签,我们在浏览器中浏览时也不一定会出错,这就导致了很多新手经常乱嵌套xhtml标签,而且还一直认为这样是对的。 但是,作为一个合格的前端人员来说,遵守w3c标准是最起码的。

接下来我们先看看上面这段代码在浏览器中的效果:

这一眼看上去好像倒没什么不对的地方,我们可以看出,第一个块元素p当中由于是嵌套了两个行内元素,所以那两个行内元素都并排在一行,第二个块元素p和第三个块元素h1当中嵌套了两个div块级元素,理所当然的,它们就各占了一行,分成了两行。,不换行的行内元素没有换行,应该换行的div块元素也确实是换行了,感觉好像都挺正常的。

别急,接下来我们给这些html标签写入样式:

 body,p,span,h1 {margin:0;padding:0;}
p,h1{background:#f60;margin:10px;}

在上面的样式中,我先把默认的margin和padding初始化,然后给p元素和h1设置了一个背景颜色,一个外边距10px

我们看看浏览器中的效果是什么样的:

我们发现,第一个p元素和最后一个h1元素是正常的,有背景,外边距也是正常的。第二个p元素却不正常了,咋回事呢?

由于上面的html代码比较有针对性,而且代码量很少,所以就算你是新手你可能也马上就能想到,是p元素当中嵌入了块元素所导致的一个问题。但是你有没有想过,如果代码量稍微多一点,html结构再复杂一点,而且一个页面你在编写html时又多次用到这种不规范的嵌套方式时,你会不会有点头痛?

不过头痛归头痛,问题还是得解决,我们一起来看看到底为什么会这样。

我们打开firebug (关于firebug的使用,请参看我前面的文章:Div+CSS教程系列13:CSS页面调试利器:Firebug使用指南。)如果你没装firefox浏览器,你也可以用IE的F12来查看,用法跟firebug都差不多。

我们在firebug中看到浏览器是怎么对这段代码解析的,如下图:

再看一下在IE的F12中是什么样的:

我们发现,包含了两个行内元素的第一个块元素p和包含了两个块级元素的第三个块元素h1都能正常被浏览器解析,唯独第二个包含了两个块级元素的p元素不能被正常解析,从上面的图中可以看出,第二个p中的两个div已经跑到了包含它们的p元素的外面,而p本身却在被它包含的div的前面和后面分别形成了两个空的p元素。

看到这里我们就能理解为什么我们给第二个块元素p设置的背景颜色显示不出来了,因为本来在它里面的子元素div已经跳出了它的包含,而第二个p元素本身此时已经变成了两个没有包含任何元素的空块,而一个元素如果里面没有内容并且你没有给它设置一个高度的话,它的高度就是0,一个0高度,没padding的元素,你就算给它设置了背景颜色,你当然也看不到。

我们在CSS样式中给p元素设置一个高度:

 body,p,span,div,h1 {margin:0;padding:0;}    
 p,h1{background:#f60;margin:10px;}
 p{height:50px;}

我们再看浏览器中的效果,这时候就一目了然了:

可是这是我们要的结果吗?显示不是,我们要的结果应该是这样的:

既然知道了是p元素中包含块级元素所引起的,那要解决问题就很简单了,我们把第二个p换成div或者其它块元素,当然h1-h6的这几个块元素里面按照规定也是不能包含块元素的,虽然我在这里的代码中这样用并没有出问题,但是这样嵌套确实是违反标准的,所以我们平时一定不要这样用。

至于为什么p元素中嵌套块元素就会出现块元素跳出的情况,这个我也确实搞不太明白,网上很多文章说是因为很多浏览器纵容p标签不关闭标签的写法,(比如这样:<p>xxxxxxxxxxx,一个只有开始标记,却没有结束标记的p元素)然后遇到p当中的块元素时,浏览器就会自动把p标签在块元素之前封闭,我觉得这纯粹是瞎扯,首先,所谓的浏览器纵容p标签不关闭那就是瞎扯,现在的各大浏览器我想都应该是遵循的W3C最新标准吧,而xhtml当中已经明确规定,标签必须关闭。否则在未出现相对应的关闭标签前,浏览器就会把从该标签开始的地方,一直到文档结束这一部分的内容都视为该标签的子标签。

同样属于块级元素,也同样被规定不能在其中嵌入块级元素的h1到h6就不会出现这种块元素跳出的问题,我现在就拿h1和p来做试验,,看看标签不关闭的情况下是什么样的。 先看一段html代码:

<p>
   <span>用来测试浏览器对标签不关闭的处理方式</span><br />
   <span>用来测试浏览器对标签不关闭的处理方式</span><br />
   <span>用来测试浏览器对标签不关闭的处理方式</span><br />
   <span>用来测试浏览器对标签不关闭的处理方式</span><br />
   <span>用来测试浏览器对标签不关闭的处理方式</span><br />

为了方便更直观的理解,我们用CSS给P元素设置一个绿色背景颜色:

p{background:#0f0;}

看一下在浏览器中的效果:

接着我们把p元素换成h1元素,同样不关闭标签:

html代码:

<h1>
   <span>用来测试</span><span>用来测试</span><br />
   <span>用来测试</span><span>用来测试</span><br />
   <span>用来测试</span><span>用来测试</span><br />
   <span>用来测试</span><span>用来测试</span><br />

我们也给h1标签设置一个背景颜色,CSS代码如下:

p{background:#f50;}

浏览器中的效果:

很显然,p元素和h1元素对标签未关闭的处理方式是一样的,都是把从该标签开始的地方一直到文档结束部分的内容看作是该标签的子元素。

既然浏览器对标签未关闭的处理方式都是一样的,那么h1中嵌入的块元素不会跳出,而p元素中嵌入的块元素却会跳出这个问题显然跟浏览器纵不纵容标签不关闭没有一毛钱关系。

以下这段话的观点只是我个人猜测,大家觉得不对的话,可以完全忽视。 我觉得出现这个问题的原因可能跟html标签本身的含义有关,p标签在html中的含义就是指一个段落,既然是一个段落,那么在它当中肯定只允许出现行内元素或文本,而p同时又是一个块级元素,为了防止我们在这个特殊的块元素中嵌入其它的块元素,使得这个段落失去了原本的意义,所以当我们在p元素中嵌入块元素时浏览器解析时就会自动把p元素中的内容从块元素出现的地方结束,然后把p元素中的块元素单独脱离出来。

其实大家只要记住以后写html结构时千万不要这样写就OK了。其它的也不用管那么多。

如果谁有这个现象的官方解释文档,麻烦告知一下。

 

这一节就到此为止,下一节继续讨论块级元素和行内元素的知识点。

(责任编辑:zcp)
以上学习文章《Div+CSS教程系列16:关于html块级元素和行内元素的一些不得不知》由cms学习好站[www.cmsgood.com]提供阅读!

上一篇: 上一篇:脚本语言--网页常用技巧

下一篇: 下一篇:HTML lang 属性



网友评论:
发表评论
评价:
表情:
IT技术 | IT教程 | cms模板 | 网站地图
如果无意之中侵犯了您的版权,请来电告知,本站将在3个工作日内删除 QQ: 123456789
工业和信息化部网站备案系统,cms学习好站
备案号:豫ICP备14003914号-1