(CSS)布模局型总结.docxVIP

(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后，会保证当其被解析时左右不会出现浮动元素。但如果它是浮