块对象与内联对象

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2013-07-30 14:22:45　-　阅:　-　评:0　-　积分:0

在学习div之前我们先要理解下块对象与内联对象，明白这一点将在以后的排版中受益无穷。

常见的块对象有div,p,pre,form,h标签等，内联对象有span,a,strong等。对于如何来理解块对象与内联对象，个人是这样理解的:
块对象单独占据一行且能包含块对象或内联对象；内联对象则可以在同一行内显示多个内联对象（官方标准请参考css2.0中文手册.chm）。对于如何来进行判断，我们可以初步的用代码来进行测试。值得注意的是，不要对标签进行重置，也不要多加属性，只加一个边框来进行识别即可。代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>块对象与内联对象之block--艺灵设计,qq群:231749938</title>
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com" />
<meta name="keywords" content="块对象,内联对象,display:inline,display:block,ie6 bug,兼容ie6">
<style type="text/css">
div,p,form,h1,span,strong,a{border:1px solid #f00}
</style>
</head>
<body>
　<div>div</div>
　<p>p</p>
　<form>form</form>
　<h1>h1</h1>
　<span>span</span>
　<strong>strong</strong>
　<a href="#">a</a>
</body>
</html>

上述效果截图如下：
块对象与内联对象

从图中可以看出div,p,h1标签都是单独占据了一行；span,a,strong在同一行内显示。再回过头来看看个人的理解，有没有新的发现？你是否会在想：“内联对象不能包含块对象？”再次用代码来进行测试，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>块对象与内联对象之inline--艺灵设计,qq群:231749938</title>
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com" />
<meta name="keywords" content="块对象,内联对象,display:inline,display:block,ie6 bug,兼容ie6">
<style type="text/css">
div,p,form,h1,span,strong,a{border:1px solid #f00}
</style>
</head>
<body>
<span>span <div>div </div> </span>
</body>
</html>

上述效果截图如下：
块对象与内联对象

我们发现虽然代码中，"<span>span <div>div </div> </span>"内联对象是包含了块对象，但在显示效果中却发现块对象跑到了内联对象的外面去了。也就是说：块对象可以包含本身及内联对象，而内联对象却不能包含块对象,(排除浮动影响)。

理解了块对象和内联对象后，我们可以将两者在不同需求下进行相互转换，做到游刃有余。通常我们在浏览一些源码网站时会看到一行内有多种高亮色代码。对于此效果通常都是使用内联对象span来实现的，当然你也可以用块对象来实现。

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/div/2013-07-30/62.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！