布局模型(8)CSS 包含块的概念

　　那么包含块是不是也可以嵌套呢，嵌套之后的包含块又有什么关联呢？答案是肯定的，我们继续通过一个示例来进行阐释，请输入下面的结构代码块：

< !--[多层包含块]-->
<divid="contain">
<h2>标题</h2>
<divclass="parag">
  <p></p>
  <span></span>
  <p></p>
</div>
</div>

　　为 div 元素声明 position: relative 样式，即定义所有 div 元素为包含块：

div {/* 定义包含块 */
position:relative;
}

　　外层的 div 元素（#contain）就为 h2 和内层的 div 元素（.parag）建立了一个包含块，内层的 div 元素（.parag）又为内部的 p 和 span 元素建立了一个包含块。
　　当定义 p 和 span 元素绝对定位时，它会根据内层的 div 元素（.parag）来确定自己的位置和百分比大小，而不会参照外层的 div 元素（#contain）。
　　如果内层的 div 元素（.parag）也被定义了绝对定位，它会参照外层的 div 元素（#contain）来进行定位，并确定百分比大小，不过它会间接地影响 p 和 span 元素在屏幕上的显示位置和百分比大小。

　　但是由于 IE 浏览器在解析多层包含时会存在一些问题，因此在使用时要特别小心：

　　1、在 IE 浏览器中，只有当绝对定位的包含元素拥有层特征时才能够准确解析。什么是层特征呢？简单地说，具有层特征的元素应该包含下面的声明：

#Layer1 {/* 定义层的基本样式 */
position:absolute; /* 绝对定位，必要特征，也可以取值relative或fixed */
width:200px; /* 宽度，必要特征 */
height:115px; /* 高度，必要特征 */
z-index:1;/* 叠放顺序，次要特征 */
left: 143px; /* x轴坐标，次要特征 */
top: 139px; /* y轴坐标，次要特征 */
}

　　而且绝对定位元素的百分比大小取值参考也很容易出错，这在上面的示例中也可以看到。在 IE 5、IE 6 中都有问题，在 IE 7 中虽然有了很大改善，但是有些小地方还是有错误，如果用 IE 浏览器预览上面的示例就会发现问题。例如，我们看下面这个示例，请输入下面的CSS 布局代码：

/*[包含块存在的问题]*/
#div1 {/* 定义包含元素为包含块 */
position:relative; /* 相对定位 */
background:blue;
}
#div2 {/* 定义被包含的绝对定位元素属性 */
position:absolute; /* 绝对定位 */
width:100px; /* 宽度 */
height:100px; /* 高度 */
background:red;
left:50%; /* 左偏移量 */
top:50%; /* 顶部偏移量 */
}

　　然后，输入 XHTML 结构代码：

< !--[包含块结构]-->
<spanid="div1">包含元素
<divid="div2">绝对定位元素</div>
</span>

<!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=gb2312" /> <title>包含块存在的问题</title> <STYLE type=text/css> html,body { height:100%; } #div1 {/* 定义包含元素为包含块 */ position:relative; /* 相对定位 */ background:blue; } #div2 {/* 定义被包含的绝对定位元素属性 */ position:absolute; /* 绝对定位 */ width:100px; /* 宽度 */ height:100px; /* 高度 */ background:red; left:50%; /* 左偏移量 */ top:50%; /* 顶部偏移量 */ } </STYLE> </head> <body>  <span id="div1">包含元素 <div id="div2">绝对定位元素</div> </span> </body> </html>
提示：您可以先修改部分代码再运行

　　IE 5、IE 6、Firefox 2中的显示结果：

　　
IE 5　　　　　　　　　　　　　　　　　　　　　　　IE 6