#div1{width:300px; height:300px; background:#900;}
#div2{width:100px; height:100px; background:#090;}
#div3{width:100px; height:100px; background:#009;}
a{color:#fff; background:#F93;}
HTML代码如下:
<div id=”div1″>
<div id=”div2″></div>
<div id=”div3″></div>
<a href=”#”>可容纳内联元素和其他块状元素</a>
<a href=”#”>Love CSS</a>
</div>
效果是不是下面这个

两个连接a是不是处于同一行(不要忘记a是内联元素哟~),这就解释了概念上说的“内联元素允许其他内联元素与其位于同一行”,为什么不说“内联元素允许其他元素与其位于同一行”,因为其他元素包括两种元素,内联元素和块状元素,它如果和内联元素在一块那就肯定在一行了,如果和块状元素在一块,即使它同意,他后面的块状元素也不同意,块状元素会另起一行位于它的下一行。
我们继续添加条件,现在大家给内联元素a在css中加上宽度和高度,比如width:100px;height:50px;看看有什么变化
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; background:#F93;width:100px;height:50px;}
看到效果了没有,是不是没有任何变化呢,这就说明了概念中的内联元素的宽度(width)高度(height)不起作用,它的大小只随内部文本或者其他内联元素变化,具体证明算是给大家一个作业,自己来证明一下。
如果要让定义好的宽度和高度对内联元素起作用,有什么办法没有?答案是:当然。因为事情没有绝对的在CSS上面也成立,因为CSS中有两种元素,内联元素和块状元素,但是宽度和高度只对块状元素起作用,内联元素不起作用,如果我们把内联元素转化成块状元素,他不就具有了块状元素的特性了嘛,当然宽度和高度也就起作用了,如果你能想到这个思路,证明你的大脑现在非常活跃哟,这时候我们只需要给相应的内联元素加上一个属性display:block就可以了,如下
a{color:#fff; background:#F93;width:100px;height:50px; display:block;}
怎么样,起作用了吧,和下面的效果一样嘛~

为什么两个a不处于同一行了呢,那是因为这两个内联元素a都被转化成了块状元素,既然成功转化为块状元素,就应该具有块状元素最显著的一个特点,不允许其他元素与他同一行,所以这两个a垂直排列喽~










