12布置元素:布局和排版

浏览器用流来布置页面上的XHTML元素。浏览器从XHTML文件的开头开始,从头到尾跟着元素的流显示它遇到的每个元素。

当浏览器要并排显示两个内联元素时,两个元素之间的边界为两个元素边界之和。当浏览器并列放置两个块元素时,共同的边界会重叠到一起,重叠边界的高度是最大边界的值。

float属性让一个元素尽可能靠左或靠右(CSS只允许吧元素漂移到右边或者左边)。

漂移可以用来给网页分栏,可以分成以下几个步骤来做。1.用id给要漂移的元素一个名字。2.要把它漂移到哪个元素下面,务必把它的XHTML移到那个元素后面。3.设置元素的宽度。4.把元素漂移到左边或者右边。clear元素可以使元素流入页面时,不允许漂移元素出现在这个元素的左边、右边或两边。

漂移元素的边界不与正常流中元素的边界相交,所以它们不会相叠。

冻结布局冻结页面的大小,把浏览器调宽时外观明显变差。

凝胶物布局锁定了页面中内容区的宽度,但把它们放到浏览器中央。

绝对布局,浏览器把元素从流中完全移走,接着浏览器把元素放置在top和right属性指明的位置(也可以用bottom和left;可以用px也可以用百分比指定位置)。和漂移元素不同的是,流中的元素要调整它们行内容还要考虑到漂移元素的边界。但绝对布置元素对其他元素没有任何影响。z-index属性可以用来指定叠层位置。此时不能用clear属性来避免元素覆盖。

各种布局的比较1.漂移布局:用float属性,页脚用clear属性,唯一的问题是会导致内容放置顺序的改变。

                    2.凝胶物布局,用固定大小的<div>来包围页面中的所有内容来创建一个冻结布局,然后通过用“auto”属性值让边界扩张来做成凝胶物布局。这种方法的缺点是内容不会随着浏览器窗口的变换而扩张。

                    3.绝对布局绝对元素不能用clear属性,无法避免元素覆盖

一般情况下,多栏布局中用漂移被认为是最灵活的解决方法。注意内容的顺序。

使用固定布置指定元素的位置和使用绝对布置一样,不过这个位置使相对于浏览器窗口边缘的偏移,而不是页面。

不像绝对布置和固定布置,相对布置的元素仍然是页面流中的一部分,不过在最后一刻,就在元素被显示之前,浏览器偏移它的位置。相对布置稍微有点像静态布置,又稍微加了点绝对布置。相对布置被定义为相对实际位置的偏移,而不是与最近包含的块绝对的平行。

原文地址:https://www.cnblogs.com/dingzibetter/p/6120534.html