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

看完前面的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元素却不正常了，咋回事呢？