css 块状元素和内联元素

在用CSS布局页面的时候，我们会将HTML标签分成两种，块状元素和内联元素（我们平常用到的div和p就是块状元素，链接标签a就是内联元素）。是在CSS布局页面中很重要的两个概念，必须要理解透彻！既然说到概念就先看看块状元素和内联元素的定义。
注：这节课看似挺长，其实内容很少，通过举例子让大家更容易理解而已，不要被眼前的文字和代码吓到哟~
块状元素
一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。常见块状元素为div和p。
内联元素
内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但宽度(width)高度(height)不起作用。常见内联元素为“a”。
做了个对比表，帮助大家更容易理解。
块状元素 内联元素
是否允许其他元素同处一行 no yes
width和height是否起作用 yes no
对于上面的概念，我们用实例的方式给大家讲明白，要注意听哟~
要求：ID为div1的红色(#900)区域，宽度和高度均为300像素，并且包含一个ID为div2的绿色区域，长度宽度
均为100像素的div2。
CSS代码如下：
#div1{width:300px; height:300px; background:#900;}
#div2{width:100px; height:100px; background:#090;}
HTML代码如下：
<div id="div1">
<div id="div2"></div>
</div>
为了方便初学者更好的学习，我把完整的代码发出来

如果你做出来了，就继续往下看，咱们给刚才的要求再加一个条件，在div1里放入一个链接a，内容为“可容纳内联
元素和其他块状元素”颜色为白色。
CSS代码如下：
#div1{width:300px; height:300px; background:#900;}
#div2{width:100px; height:100px; background:#090;}
a{color:#fff;}
HTML代码如下：

到这里，我们可以看得到div1这个块状元素里面拥有两个元素，一个是块状元素div2，另一个是内联元素a，这就是块状元素概念里面说的“一般是其他元素的容器，可容纳内联元素和其他块状元素”，为什么要说一般呢，因为块状元素不只是用来做容器，有时还有其他用途，比如利用块状元素将上下两个元素隔开些距离，再比如利用块状元素来实现父级元素的高度自适应，这方面的内容会在后面详细讲解，因为不属于本节知识，就不多说。

好~！我们继续加条件，在div1里面div2的后面再放入一个ID为div3的长宽均为100像素的蓝色(#009)区域块，代码如
下
CSS代码如下：
#div1{width:300px; height:300px; background:#900;}
#div2{width:100px; height:100px; background:#090;}
#div3{width:100px; height:100px; background:#009;}
a{color:#fff;}
HTML代码如下：

两个连接a是不是处于同一行(不要忘记a是内联元素哟~)，这就解释了概念上说的“内联元素允许其他内联元素与其位于同一行”，为什么不说“内联元素允许其他元素与其位于同一行”，因为其他元素包括两种元素，内联元素和块状元素，它如果和内联元素在一块那就肯定在一行了，如果和块状元素在一块，即使它同意，他后面的块状元素也不同意，块状元素会另起一行位于它的下一行。

我们继续添加条件，现在大家给内联元素a在css中加上宽度和高度，比如width:100px;height:50px;看看有什么变化
CSS代码

1. #div1{width:300px; height:300px; background:#900;}
   
2. #div2{width:100px; height:100px; background:#090;}
   
3. #div3{width:100px; height:100px; background:#009;}
   
4. a{color:#fff; background:#F93;width:100px;height:50px;}

看到效果了没有，是不是没有任何变化呢，这就说明了概念中的内联元素的宽度(width)高度(height)不起作用，它的大小只随内部文本或者其他内联元素变化，具体证明算是给大家一个作业，自己来证明一下。

如果要让定义好的宽度和高度对内联元