课内联和块标识.docVIP

第八课 内联元素和块元素 在前面的课程中，我们学习了两个特殊的标识span和div，可以配合CSS的各种样式给予网页丰富多彩的效果。那么这两个标识有没有区别和不同呢？什么地方该使用span？什么地方使用div呢？ 今天我们来进一步学习这两个标识的使用，通过对内联元素（inline）和块元素(block)知识的学习，来认识它们的区别，掌握内联元素和块元素的知识，对于提高我们的网页设计能力有很大帮助。 1、块级元素 首先我们来了解一下，什么是块元素(block)，它有着怎样的特点： 块元素一般是其他元素的容器元素，块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落你把块容器元素想象成一个个，或者如果你玩过剪贴文载的话，那就更加容易理解了。我们先把需要的文章从各种报纸、杂志剪下来。每块剪下来的内容就是一个block。然后我们把这些纸块按照自己的排版意图，用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报了总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度。css部分 .left{ background-color:#cccccc; border:2px solid #333333; width:200px; height:100px; } .right{ background-color:#cccccc; border:2px solid #333333; height:100px; } html语言部分 div class=leftdiv left/div div class=rightdiv right/div 本例就使用了块元素div，并把它用在两个层中，这个网页该如何显示呢？ 由于两个层都是块元素，因此都是从新行上开始，right层由于没有设置宽度，因此缺省宽度是整个容器的100%。 2、内联元素 内联元素一般都是基于语义级(semantic)的基本元素只能容纳文本或者其他内联元素，常见内联元素a，它具有以下特点： 1、和其他元素都在一行上；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。 css部分 .left{ background-color:#cccccc; border:2px solid #333333; width:200px; height:100px; } .right{ background-color:#cccccc; border:2px solid #333333; height:100px; } html语言部分 span class=leftspan left/span span class=rightspan right/span 在本例中除了使用了内联元素span外，较上例没有任何变化，但是网页的显示却发生了很大的变化。 可以看到，由于都使用了内联元素span，因此两个层都处于同一行上，而宽度就是它的文字或图片的宽度，不可改变高，行高及顶和底边距不可改变块元素(block)和内联元素(inline)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。 继续看下面一个例子： css部分 .leftfloat{ background-color:#cccccc; border:2px solid #333333; width:200px; height:100px; float:left; } .right{ background-color:#cccccc; border:2px solid #333333; height:100px; } html语言部分 div class=leftfloatdiv left float:left/div div class=rightdiv right /div 本例中，相较于本课第一例，唯一的变化是在left层使用了浮动左对齐属性float:left，显示如下图 由于给left层设置了浮动左对齐，可以理解为left层在平面上浮起，移动到了左边，这时由于left层已经不在原来的平面上，所以剩下的元素要补充因left层浮起而留下的空白，所以right层自动填补上来，出现在left层右边。 float属性的值可以是left、right或者none。