如何进行层布局模型

1、摘选自：el.csdn net该属性取值可以包括 sic、absolute、fixed 和 relative，具体说明如下： l sic：表示不定位，元素遵循 HTML 默认的模型，如果未显式元素的定位类型，则默认为该值。l absolute：表示绝对定位，将元素从文档流中拖出来，然后使用 left、right、top、 bottom 属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于 body 元素，即根据浏览器窗口，而其层叠顺序则通过 z-index 属性来定义。l fixed：表示固定定位，与 absolute 定位类型类似，但它的包含块是视图（

2、屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档影响，这与 background-attaent: fixed;属性功能相同。目前 IE 浏览器还不支持该属性值，因此在布局中使用比较少，在后面章节中也不再专题讨论。l relative：表示相对定位，它通过 left、right、t ottom 属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按 s ic 方式生成一个元素，然后移动这个元素，移动方向和幅度由 le

3、ft、right、t ottom 属性确定，元素的形状和偏移前的位置保留不动。6.4层布局模型层布局模型源于图形图像编辑器中非常流行的图层编辑功能，图层能够精确操作和编辑图像而广受平面设计师的欢迎，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。为了支持层布局模型，CSS 定义了一组定位（itioning）属性，详细说明可以参考 2.4 节 CSS 属性列表。元素定位的设计思路非常简单，它允许用户精确定义网页元素的相对位置，这里的相对可以相对元素原来显示的位置，或者是相对最近的包含块元素，或者是相对浏览器窗口。6.4.1定位类型在层布局模型中最的技术应该是元素定位类型了，只有设计师

4、确定元素的定位类型后，才能定义其他定位属性，如包含块、坐标偏移、层叠顺序等。在 CSS 中可以通过ition 属性定义元素的定位类型，其语法如下：div/* 可以定义任何元素 */ition:absolute; /*可以选择其他属性，具体参照下面说明*/绝对定位包含块6.4.2本节与下一节所要探讨的绝对定位是广义概念的绝对定位，它是指定位元素完全脱离文档流，不再受文档的影响。绝对定位模式应用于ition 属性被定义为 absolute（狭义的绝对定位）或 fixed 的任何元素。由于 relative 相对定位仍然受文档的影响，所以还不算绝对意义上的定位。与浮动元素一样，绝对定位元素以块状显示

5、。同时，它会为所有子元素建立了一个包含块，所有被包含元素都以包含块作为参照物进行定位，或在其浮动和。例如，在下面的示例中，定义了三个不同模型的包含元素，然后观察不同模型的包含元素与它们的子元素的位置关系。请输入下面的 CSS 代码：/*绝对定位-自成包含块，参考示例 6-29.html*/ #contain1,#contain2,#contain3 /*/width:380px; height:120px; border:solid 1px #666;#contain2 /*/ition:absolute; left:120px; top:60px; background:#F08080;#c

6、ontain3 /*/floeft;background:#D2B48C;#contain2 div /*/ color:#993399;border:solid 1px#FF0000;#sub_div1 /*/ width:80px;height:80px; ition:absolute;right:10px; /*定义该绝对元素右边距离父级包含块的右边距离*/ bottom:10px; /*定义该绝对元素底边距离父级包含块的底边距离*/ background:#FEF68F;#sub_div2/*/width:80px;height:80px;floeft;background:#DDA0

7、DD;#sub_div3 /*/ width:100px;height:90px; background:#CCFF66;然后，输入 XHTML 结构代码：元素一元素二绝对定位divdiv子元素 1绝对定位 id=sub_div2子元素 2浮动id=sub_div3子元素 3元素三浮动显示结果如下，可以看到“元素二”被定义为绝对定位，它以浏览器窗口为包含块，显示位置根据元素左边到窗口左边的距离和元素上边到窗口上边的距离来确定。而“子元素 1”却根据具有定位属性的“元素二”为包含块，显示位置根据“子元素 1”右边到“元素二”右边的距离和元素底边到“元素二”底边的距离来确定。在“元素二”中包含了

8、3 个子元素，它们以不同的性质显示，但它们都以“元素二”作为参照，包括其中的浮动元素和绝对定位元素。图 6.41在IE 6中浏 览。流动元 素都 环绕 浮动 元素 分布。图 6.42在Firefox2 中浏览。的块状元素与浮动元素错行分 布，而流动内容则环绕浮动元素分 布。因此，根据上例演示可以总结：一个绝对定位元素将为它包含的任何元素建立一个包含块，被包含元素遵循普通文档流规则，在包含块中自然，但它们的偏移位置由包含块来确定。绝对定位元素甚至可以包含其他的绝对定位元素，这些绝对定位的子元素同样可以从父包含块内脱离出来。这些子包含块通过定位取负值或设置较大的偏移值跑到父包含块的外面。绝对定位元

9、素包含块的定义与其他元素有一点不同。绝对定位元素的包含块是由距离它最近的、且被定位的元素，也就是在它外面最接近它的ition 属性值为 absolute、relative 或 fixed 的父级元素。如果不存在这样的父级元素，那么默认包含块就是浏览器窗口本身。绝对定位元素的包含块可以是一个内联元素。例如，请输入下面的 CSS 代码：/*绝对定位-内联包含块，参考示例 6-30.html*/p/*/ margin:40px;white-space:pre; /*保留代码中内容显示预定义格式*/ font-size:14px;pspan /*/ ition:relative;pstrong /*/

10、 ition:absolute;left:40px; /*strong 元素左边到 span 元素左边的距离*/ top:-30px; /*strong 元素顶边到 span 元素顶边的距离*/ font-size:18px;然后，输入 XHTML 结构代码：春花秋月何时了，南唐宋显示效果前后比较：图 6.43在 IE 6 中浏览。为 strong 元素定义绝对定位，然后根据相对定位的 span 元素作为包含块进行定位。图 6.44在 IE 6 中浏览。由于没有为 span元素定义定位属 性，则 strong 元素就以浏览器窗 口为包含块进行 定位，标题显示位置跑到窗口外边。如果把内联元素作为

11、包含块，情况就变得复杂多了。因为内联元素有可能在几行内显示，产生好几个线性盒，这时包含块就被定义为这几行区域，而其被包含的绝对定位子元素将根据内联元素的第 1 行第 1 个字符左上角来确定 left 和top 属性的偏移值，根据第一行最后一个字符的右下角来确定 right 和 bottom属性的偏移值。例如，在下面这个文本段中，在其中设置两个相互嵌套的 span 元素：在用 CSS 控制排版过程中，定位一直认为是一个难点，这主要是表现为很多网友在没有深入理解清楚定位的原理时，排出来的杂乱网页常让他们不知所措，而另一边一些高手则常常借助定位的强大功能做出些很酷的效果来，比如 CSS 相册等等，因

12、此自己杂乱的网页与高手完美的设计形成鲜明对比，这在一定程度上打击了初学定位的网友，也在他们心目中形成这样的一种：当我熟练地玩转 CSS 定位时，我就已是高手了。然后，把外层的 span 元素定义为包含块，而把内层的 span 元素定义为绝对定位，并进行偏移定位，具体的 CSS 控制代码如下：/*内联元素包含块，参考示例内联元素包含块 1.html*/ p /*定义文本段属性*/width:400px; height:200px; border:dashed 1px green;#relative /*定义包含块，并用蓝色线框标示*/ ition:relative;border:solid 1p

13、x blue;#absolute /*定义绝对定位子元素，并向右下角偏移 200px*/ ition:absolute;left:200px; top:200px;border:solid 2px red;则显示效果如图 6.45 所示，其中 a 所指示的位置为子元素定位前的位置，b 所指示的顶角为子元素偏移的参考点，c 所指示的顶角为偏移后的定位点。可以看到，在包含块多行显示时，定位元素将根据 b 点（第 1 行第 1 个字的左上角）进行偏移定位，而不是根据文本段左上角作为参考点进行定位。如果定义 right 和 bottom 属性进行偏移，其中 CSS 代码如下，则显示如图6.46 所示。

14、定位元素将根据 b 点（第 1 行最后 1 个字的右下角）进行偏移定位，而不是根据文本段右下角作为参考点进行定位。#absolute /*定义绝对定位子元素，并向左上角偏移 100px*/ ition:absolute;right:100px; bottom:100px;border:solid2pxred;图图6.456.46图 6.47但如果用 IE6 浏览器进行预览，则会出现奇怪的效果，如右图所示。看到 IE 6 不再把包含块作为参照物，而是以 p 元素的右下顶角为参考点进行偏移。如此怪异的现象产生的根本原因不得而知，这也说明了内联元素作为包含块时可能存在的风险，希望能够引起设计师的注意

15、。绝对定位元素的边距6.4.3当一个元素被定义为绝对定位元素后，它依然遵循盒模型基本规则，可以有自己的背景、边界、边框和补白，因此在计算边距时要适当考虑这些盒模型。例如，请输入下面的 CSS 代码：/*绝对定位元素的边距，参考示例 6-31.html*/ body /*/margin:0; padding:0;div /*定义所有 div 元素都为绝对定位，边界和补白都为 20 像素*/ margin:20px;padding:20px; ition:absolute;#contain /*/border:solid 20px red;#sub1/*/ width:50px;height:50

16、px; border:solid 20px blue;图 6.48然后，输入 XHTML 结构代码：绝对定位都是以包含块的内边框到绝对定位元素的外边界之间的最短垂直距离来计算 top、 right、bottom 和 left 四个方向上的边距值。如果没有指定这四个值，则上述属性会使用默认值 auto，这将导致绝对定位元素遵循正常的文档流动布局规则，一个元后被呈递。受布局模型的影响，如本例左图所示，该绝对定位元素如同一个块状元素分布在左上角，并会随文档流左右、上下移动。图 6.49因此，要激活元素的绝对定位，必须指定 left、right、tottom 属性中的至少 1 个值，并且设置ition

17、 属性值为 absolute。当仅指定 1 个值时，绝对定位元素会在指定值方向遵循绝对定位规则，而在另一个方向上依然遵循文档此时会出现很有意思的杂交布局现象。规则，文本流文本流文本流文本流文本流文本流虽然不同浏览器都支持这样的观点，但 IE 与非 IE浏览器在者注意。边距上还存在细微差别，需要读一般只需指定这四个属性之中相邻两个属性值即可实现精确定位。如果定义了 4个属性值，则以 left 和 top 属性值为准；如果定义了 3 个属性值，会优先考虑left 或 top 属性值，以及相邻属性值；如果定义了 2 个相反方向的属性值，如 top 和 bottom，则优先采用 left 和 top

18、属性值，right 和 bottom 的值将被忽略。由于绝对定位的元素不再受文档流影响，因此设置绝对定位元素的边界就没有任何意义，一般可以省略边界值设置。图 6.50在 IE 6 中浏览。元素的定位值：#sub1 /*参考示例 6-33.html*/margin:0px;left:0px;top:0px;图 6.51元素的定位值：#sub1margin:0px;left:25%;right:0px;左右值，则以left 值为准，相邻 top 属性优先，默认为包含块补 白与绝对定位元素的顶部边界之和。相对定位6.4.4绝对定位能够精确控制元素的显示位置，但完全使用绝对定位会使网页布局缺乏灵活性，

19、因此 CSS 又提供了 relative 相对定位属性，它吸取了布局的灵活性和层布局的精确性，使网页布局能够兼具多种模型优势，满足设计师对网页设计的复杂要求。与绝对定位不同的是，相对定位元素的偏移量是根据它在正常文档流里的原始位置计算的，而绝对定位元素的偏移量是根据包含块的位置计算的。一个绝对定位元素的位置取决于它的偏移量:top、right、bottom 和 left 属性值，相对定位元素的偏移量与绝对定位一样。例如，在示例 6-30.html 中，去除 span 元素对象的相对定位和 strong 元素对象的绝对定位，直接定义 strong 元素对象为相对定位，则显示效果如图 6.41所示

20、。图 6.52p strong /*相对定位，参考示例 6-34.html*/ ition:relative;left:40px; top:-30px;font-size:18px;从左图可以看到，相对定位后，元素对象的原位置保留不变。相对定位偏离的边距遵循绝对定位中的偏离规则，不过相对定位的包含块是元素对象的原位置。相对定位元素遵循的是布局模型，存在于正常的文档流中，但是它的位置可以根据原位置进行偏移。由于相对定位元素占有自己的空间，即原始位置保留不变，因此它不会挤占其他元素的位置，但可以覆盖在其他元上进行显示。浏览器在处理相对定位元素覆盖其他元素时是存在没有指明应该怎么处理这个问题。的。不

21、幸的是，W3C 标准并与相对定位元素不同，绝对定位元素完全被拖离正常文档流中原来的空间，且原来空间将被不再被保留，被相邻元素挤占。把绝对定位元素设置在可视区域之外会导致浏览器窗口的滚动条出现。而设置相对定位元素在可视区域之外，滚动条是不会出现的。关于相对定位元素是否可以建立一个新的包含块以定位其包含的子元素（包括相对定位或绝对定位）曾出现过争论。最初的 W3C 标准相对定位元素总是建立一个包含块。然而，后续标准修正了这个，相对定位元素和普通元素一样，它们遵守非定位元素规则。不过，我在用相对定位的内联元素、块状元素分别验证其的子元素的定位时，发现不管是块状元素还是内联元素，当定义为相对定位之后，

22、子元素都会把它们看作一个包含块，定位偏移值都以包含块作为参考。这个结论在不同浏览器中都得到了验证，看来标准也是在争执中不断修正的。混合定位6.4.5CSS 定位是 CSS 学习的一个难点，但也是标准布局的一个重点，很多初学者对此都是一知半解，没有建立一个完整、清晰的认识。接着上面的话题，来探讨混合定位问题，即把相对定位和绝对定位结合起来，形成混合定位，这在网页布局中比较常用，也很实用。混合定位是利用相对定位的模型优势和绝对定位的层布局优势，实现网页定位的灵活性和精确性优势互补。例如，如果给父元素定义为ition:relative，给子元素定义为ition:absolute，那么子元素的位置将随

23、着父元素，而不是整个页面进行变化。例如，看下面这个示例，请输入下面的 CSS 代码：/*混合定位布局，参考示例 6-35.html*/ body /*/margin:0; /*清除 IE 默认边距*/ padding:0; /*清除非 IE 默认边距*/text-align:center; /*设置在 IE 浏览器中居中对齐*/#contain /*/ width:100%;/*定义宽度*/height:310px; /*必须定义父元素的高度，该高度应大于绝对布局的最大高度，否则父元素背景色就无法显示，且后面的布局区域也会无法正确显示*/ition:relative; /*定义为相对定位*/ background: #E0EEEE;margin:0 auto; /*非