CSS教程:2个重要概念块状元素和内联元素

作者佚名技术来源 CSS技术浏览发布时间 2012-02-27

块状元素还是毫无联系的内联元素，都不行，都到下面一行待着去，看看例子中，绿色方块和蓝色方块是不是各处同一行，内联元素a也别想和他处一行，但是事情是没有绝对的，块状元素不是不允许其他元素和他处一行嘛，不是比较霸道嘛，没关系，咱有办法，具体什么办法，我们后面会详细讲解，知识不属于本节内容，就也不多说了，大家留意后面的教程唷~

到这里，我想大家对“块状元素”的概念已经比较清楚了，下面通过例子给大家继续解释“内联元素”的概念，当然还是继续加条件，加个什么条件呢，在a的后面再加一个内容为“Love CSS”的链接，所有链接的背景设置为淡橙色(#F93)
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;}

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)不起作用，它的大小只随内部文本或者其他内联元素变化，具体证明算是给大家一个作业，自己来证明一下。

如果要让

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

分享到：更多

你可能对下面的文章感兴趣

上一篇: CSS网页定位教程:详细学习定位知识下一篇: CSS实例教程:用position来布局页面

关于CSS教程:2个重要概念块状元素和内联元素的所有评论

随机推荐