【基础五】块状元素和内联元素.doc

作者：KwooJan出处： 本文版权归作者和w3cfuns共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利。 【基础五】块状元素和内联元素 ? ?? ???我们在布局页面的时候，会将HTML标签分成两种，块状元素和内联元素（我们平时用到的标签div和p就是块状元素，链接标签a就是内联元素）。它们是很重要的两个概念，既然说到概念就先看看块状元素和内联元素的定义，在定义中你要留意它们两个的不同之处。注：这节课看似挺长，其实内容很少，通过举例子帮助大家更容易理解而已，不要被眼前的文字和代码吓到。块状元素? ?? ???一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。常见块状元素为div和p。内联元素? ?? ???内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但宽度(width)高度(height)不起作用。常见内联元素为“a”。做了个对比表，帮助大家理解。 7?天前 上传 下载附件 (2.97 KB) 对于上面的概念，我们用实例的方式给大家讲明白，如下【要求】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 复制代码 为了方便初学者更好的学习，我把完整的代码发出来 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312 / titleCSS学习网---“可容纳内联元素和其他块状元素”/title style type=text/css !-- #div1{width:300px; height:300px; background:#900;} #div2{width:100px; height:100px; background:#090;} -- /style /head body div id=div1 div id=div2/div /div /body /html 复制代码 怎么样，是不是下面的效果： 2010-11-8 22:24 上传 下载附件 (2.43 KB) ? ?? ???如果你做出来了，就继续往下看，咱们给刚才的要求再加一个条件，在div1里放入一个链接a，内容为“可容纳内联元素和其他块状元素”颜色为白色。CSS代码如下： #div1{width:300px; height:300px; background:#900;} #div2{width:100px; height:100px; background:#090;} a{color:#fff;} 复制代码 HTML代码如下： div id=div1 div id=div2/div a href=#可容纳内联元素和其他块状元素/a /div 复制代码 是不是下面的效果: 2010-11-8 22:24 上传 下载附件 (3 KB) ? ?? ???到这里，我们可以看到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; bac