(css)布局模型总结

(CSS)布局模型总结
2012年6月18日0:37
作者：穿越中的逍遥
编者按：作者假设您对CSS布局已具有一定的了解。

在网页中，元素有三种布局模型：
1、流动模型（position:static）
2、浮动模型(float:left、right)
3、层模型（position:absolute、fixed、relative）
其中比较特殊的布局方式是：
position：relative
它保留该元素在“流动模型”或者“浮动模型”所占据的空间，不改变元素的显示方式：“内联”或者“块状”。

它仅告诉元素按照元素在原来的位置作相对移动。

但它毕竟是层模型布局的元素，如果与其它元素重叠，它将显示在非层模型布局的元素的上方。

另外设置了relative之后，元素便具有了完整的盒模型，即便是内联元素，设置高度、上下补白，上下边界也变得有效了，并且这些设置将体现在其在文档流中所占据的空间上。

流动模型
流动（Flow）是默认的网页布局模式。

任何没有具体定义position:absolute;或
position:fixed;属性，以及没有被定义浮动float:left;或float:right;的元素都将默认呈现流动布局模式。

流动布局模型具有4个比较典型的特征：
1、块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状
态下，块状元素的宽度都为100%。

实际上，块状元素都会以行的形式占据位置，不管这个元素所包含的内容有多少，也不管我们把元素的宽度设置多窄。

2、内联元素都会在所处的包含元素内从左到右水平分布显示。

有人把这种分布方式
称为文本流，文本流源于文本的从左向右自然流动，本质上它与HTTP传输方式和浏览器的解析机制密切相关。

超出一行后，会自动从上而下换行显示，然后继续从左到右按顺序流动，以此类推。

当然，读者可以利用CSS文本属性强制改变文本流动方向。

3、相邻的两块状元素或嵌套的块状元素如果定义了上下外边距会发生重叠，重叠的
结果是两者之中的最大值。

针对嵌套的重叠现象，可以通过定义父元素的overflow 属性值为“auto”来阻止这种重叠。

4、浮动元素不会发生外边距重叠，而浮动与块状元素接触时，通过后出现的元素来
决定是否重叠。

从编程的角度讲，修改已经构建好的dom树，倒不如通过决定下一个元素如何显示来的效率要高。

如果浮动元素是块状元素的父元素，根据上边的规则是应该重叠的，但是浮动元素会自动计算内部的高度宽度，所以结果外边距不会发生重叠。

浮动模型
浮动是完全不同于流动的另一种布局模型，它遵循浮动规则，但仍能看到流动对它的潜在影响。

任何元素在默认情况下是不能够浮动的，但都可以用CSS定义为浮动，如div、list、p、table，以及img等元素都可以被定义为浮动，事实上即使是如
span、strong等这样的内联元素也可以被定义为浮动。

浮动布局模型具有下面几个特征：
1、任何定义为float的元素都会自动被设置为块状显示。

这样就具有了完整的盒模
型。

2、如果当我们没有指定浮动元素的宽度时，浮动元素会自动收缩到能够包含内容的
宽度。

3、浮动模型不会与流动模型发生冲突。

当元素定义为浮动布局时，浮动元素不会脱
离正常文档流而任意的浮动，它的上边线将与未被声明为浮动时的位置一样。

但是在水平方向上，它的浮向边会尽可能地靠近包含它的元素的边缘（这个边缘是指包含元素补白的内边沿）。

4、与普通元素一样，浮动元素始终位于包含元素内，不会游离于外，或破坏元素包
含关系，这与层布局模型不同。

5、关于流动元素环绕问题。

虽然浮动元素能够随文档流动，但浮动模型与流动模型
依然存在本质区别。

浮动元素的后面的内联元素都能够以流的形式环绕浮动元素左右，甚至与上面的文本流连成一体。

而块状元素则不同，它会忽视所有浮动元素所占据的空间，好像这个浮动元素根本就不存在，依这种方式确定自己在流动模型中的位置。

6、关于浮动元素间并列显示问题。

当两个或者两个以上的相邻元素都被定义为浮动
显示时，如果存在足够的空间容纳它们，浮动元素之间可以并列显示。

它们的上边线是在同一水平线上的。

如果没有足够的空间，那么后面的浮动元素将会下移到能够容纳它的地方，这个向下移动的元素有可能产生一个单独的浮动。

很多设计师喜欢使用浮动模型来布局网页，原因就在于它能够突破流动模型布局中块状元素不能并列显示的问题。

7、浮动元素在浮动时会尽可能靠近上一个浮动素，进而把其它非浮动元素挤在一
边。

如果挤不动(如：块状元素，或者没有足够的空间在同一行显示内联元素和这个浮动元素)其他元素它就换行并紧邻着显示在上个元素之后。

8、总结：浮动元素仍然处于文档流之中，以文档流元素为自己定位，但是它不占用
文档流的空间。

浮动清除
只有块状元素可以定义清除属性，对内联元素定义清除无效。

一个块状元素设置"clear:both"后，会保证当其被解析时左右不会出现浮动元素。

但如果它是浮动元素（设置了float属性），后面的浮动元素仍有可能浮动在其左右。

当一个浮动元素定义了clear属性，它不会对前面的任何对象产生影响，也不会对后面的对象形成影响，只会影响自己的布局位置。

这里的影响是指不会主动改变别的对象的位置。

注：个人感觉，这个属性中文名翻译为“干净”更好，他表示当前元素在其被解析时保证哪边是干净的，没有漂浮物的。

浮动嵌套
浮动元素可以相互嵌套，嵌套规律与流动元素嵌套相同。

浮动的包含元素总会自动调整自身高度和宽度以实现对浮动子元素的包含。

定义了“float”的元素会自动计算元素内浮动元素所占的宽高，使之与其内的内容适应。

没有定义该属性则不能自动计算宽高，导致父元素宽高显示不正常。

也可以通过定义父元素的overflow属性为“auto”来自动扩展元素的宽高。

浮动与流动嵌套
单纯的流动元素之间或单纯的浮动元素之间相互嵌套一般都比较好处理，但是如果把浮动元素嵌入流动元素之内，则显示的效果就会很复杂，此时包含元素将根据自身属性进行显示，不再受子浮动元素的影响，也就是说父元素不能够自适应子浮动元素的高度。

浮动元素的起点将由它在包含元素内的位置来决定，但浮动元素将在包含元素的上面展开，这种情况将与绝对定位的元素有点类似。

层模型
层布局模型源于图形图像编辑器中非常流行的图层编辑功能，图层能够精确操作和编辑图像而广受平面设计师的欢迎，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。

为了支持层布局模型，CSS定义了一组定位（positioning）属性。

元素定位的设计思路非常简单，它允许用户精确定义网页元素的相对位置，这里的相对可以相对元素原来显示的位置，或者是相对最近的包含块元素，或者是相对浏览器窗口。

定位类型
1.static：表示不定位，元素遵循HTML默认的流动模型，如果未显式声明元素的定位
类型，则默认为该值。

2.absolute：表示绝对定位，将元素从文档流中拖出来，然后使用left、right、top、
bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。

如果不存在这样的包含块，则相对于body元素，即根据浏览器窗口，而其层叠顺序则通过z-index属性来定义。

3.fixed：表示固定定位，与absolute定位类型类似，但它的包含块是视图（屏幕内的
网页窗口）本身。

由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与backgroundattachment:fixed;属性功能相同。

4.relative：表示相对定位，它通过left、right、top、bottom属性确定元素在正常文档
流（或者浮动模型）中的偏移位置。

相对定位完成的过程是首先按static(float)方式生成一个元素，然后移动这个元素，移动方向和幅度由left、right、top、bottom属性确定，元素的形状和偏移前的位置保留不动。

层布局模型具有下面几个特征：
1、所有层布局元素默认都显示在文档流元素（包括浮动元素）的上层。

注意：浮动
元素并没有完全脱离文档流，他仍然受到文档流其他元素的影响。

而浮动元素默认显示在流动元素的上层。

2、绝对定位，它是指定位元素完全脱离文档流，不再受文档流动的影响，并且显示为块状。

绝对定位模式应用于position属性被定义为absolute（狭义的绝对定位）或fixed的任何元素。

由于relative相对定位仍然受文档流动的影响，所以还不算绝对意义上的定位。

3、绝对定位元素（以及relative显示的元素）会为所有其子元素建立一个包含块，其内的绝对定位元素都以包含块的边框的内边沿（这点与浮动元素不同）作为参照物进行定位。

其内的其它元素仍然按照流动布局或者浮动布局模型进行流动或者浮动。

4、内联元素如果作为包含块，情况就变得复杂多了。

因为内联元素有可能在几行内显示，产生好几个线性盒，这时包含块就被定义为这几行区域，而其内部被包含的绝对定位子元素将根据内联元素的第1行第1个字符左上角坐标作为包含块的左上角坐标，根据最后1行最后1个字符的右下角坐标来作为包含块的右下角坐标。

因此，当右下角的横坐标小于等于左上角的横坐标时，这种包含块的宽度就为零（而不是负数），包含块变为一条竖线，左边右边的横坐标重合，都为左上角的横坐标。

5、绝对定位的元素具有特别的盒子模型，并且还支持绝对定位。

下面介绍这个特别的盒子模型：
1.没有显式指定位置：则被设置为绝对定位的元素(top、left中没有设置值的)会
遵循正常的文档流动布局规则定位，宽度最远可以扩展到包含块的最右边缘
（不设置width属性时），但其宽度总是自动收缩到正好可以装下其内的元素（这点与浮动元素类似），纵向可以无限延伸(不定义height属性)。

该元素不占用任何文档流空间，其后的文档流元素自动填充这些空出来的空间，最终可能会出现绝对元素与文档流中的其它元素重叠显示的效果。

2.包含块有四条边可以用来为子元素定位。

默认是包含块的左边和上边。

1.在定义了宽度和高度的情况下，如果定义了bottom、right任一个属性值，
则这个属性与left、top进行替代，比如，定义了bottom，那么会把top
替代，也就是靠left与bottom进行定位。

如果定位发生冲突，比如同时
定义了left和right那么将以默认定位属性为准，也就是只保留left属性
及其值作为定位依据。

另外，只有与定位角同侧的margin、padding、
border，会相对定位边占据空间。

2.如果只设定了高度。

3.如果只设定了宽度。

4.如果没有定义高度和宽度，那么left、right、top、bottom将分别相对包含
块的四条边进行定位，margin、padding、border相对四条定位边也全部
有效。

3.如果定义的定位属性只有一个生效，那么left(bottom)、left(bottom)中没有生效
的那条边将参考(1)中的方案进行定位。

4.这里层元素有一个优先级规则，宽度、高度值最优先，然后是(padding、
margin、border)、最后是定位属性
6、关于z-index：
1.所有层布局模型的元素的默认z-index值为0，与非层模型布局的元素在同一层
面上。

2.对非层布局模型的元素z-index设置是无效的。

3.嵌套在层模型元素中的所有元素，默认与父元素在同一平面上，如果再定义z-
index，则其真正的z坐标是相对于父元素的z-index值进行设置的。

也就是说
父元素的z-index会影响到子元素z坐标的位置，但却不是一般的累加关系。

1.如果两元素的父元素是兄弟节点且没有定义z-index，那么这两个子元素可
以通过设置z-index改变显示顺序。

2.但是如果两元素的父元素设置了z-index并且相等，那么后出现的元素总
是显示在上方，无论另一个元素设置了多么大的z-index值。

这是因为
CSS把它们视为不同的级别，不同级别的zindex属性值是没有可比性
的。

如果不等，那么具有大的z-index父元素的元素显示在上方，无论另
一个元素设置了多么大的z-index值。

3.可见，层元素在进行z轴定位时，它们的“爹”很重要。

4.设置z-index就激活了z轴定位功能，激活之后会影响其子元素的定位，如
2)。

4.如果两元素在同一层面上，那么层布局模型的元素显示在最上面，然后下面是
浮动布局模型的元素，最下面是流动布局模型的元素。

浮动元素会挤开同层的
内联元素。

参考文献：
1、W3CSchool
2、CSS商业网站布局之道朱印宏
3、网络资料。