第十二章 布局和排版 布置元素

1、浏览器用流来布置页面上的XHTML元素,浏览器从XHMLT文件的开头开始,从头到尾跟着元素的流显示它遇到的每个元素。比如块元素,每两个之间都有换行。所以先显示文件中的第一个元素,接着显示换行,再显示第二个元素,再换行等,从文件开始一直到末尾。这就是流。内联元素在水平方向上一个接一个地流,从左上方到右下方。 

2、 float 属性让一个元素尽可能靠左或靠右,然后让它后面的元素流到这个元素的周围。

3、漂移 元素   clear: right; 这个属性说明页脚的右边不能有漂移内容。   

4、冻结布局把元素锁住,冻结到页面上,所以它们根本不能移动,因此我们避免了许多窗口扩展带来的问题。

5、它是一个你能在网站上看到的很普通的设计。这种设计在冻结的和流动的之间,它有一个相应的名字中凝胶物。凝胶物布局锁定了页面中内容区的宽度,但把它放到浏览器中央。

6、当把一个内容区的宽度设置为“auto”时,浏览器根据内容区的需要调整内容区的宽度,把边界设置成”auto”时,浏览器会计算出合适的边界是多少,并且保证左右边界相等,以使内容居中。

7、当一个元素被绝对放置了,浏览器做的第一件事是把它从流中完全移走,接着浏览器把元素放置在topright属性指明的位置

8、绝对布置的元素的另一点有趣的地方是,你可以把它们互相层叠放置。每一个布置的元素有一个叫做z-index的属性,用来指定它的层叠位置。

9、使用固定布置指定元素的位置和你使用绝对布置一样,不过这个位置是相对于浏览器窗口边缘的偏移,而不是页面。这种方法有趣在一旦用固定布置了内容,它就呆在你放置的地方,再也不动了,即使你滚动页面。

10、不像绝对布置和固定布置,相对布置的元素仍然是页面流中的一部分,不过在最后一刻,就在元素被显示之前,浏览器偏移它的位置。

11、浏览器用流在页面上放置元素。

12、块元素从开始流到结尾,元素之间有换行,每个块元素默认占据浏览器窗口的整个宽度。

13、内联元素在块元素中从左上方流到下方。如果需要多于一 行的空间,浏览器就新创建一行,在垂直方向上扩展包含块元素以包含内联元素。

14、普通页面流中的两个并列放置的块元素,上边元素的下边界和下边元素的上边界会重叠,它们之间的边界就是较大边界的大小,或者如果大小相等就是一个边界的大小。

15、漂移元素被移出了正常的流,放到左边或右边。

16、漂移元素放置在块元素的上面,不影响它们的流。不过,行内容考虑漂移元素的边界,流到它的周围。

17clear属性用来指定一个块元素的左边或右边(或两边)不能有漂移元素,一个设置了clear属性的块元素会一直向下移直到它边上的没有块元素。

18、漂移元素必须设置一个明确的宽度值,不能是默认的。

19、流动布局是:当你扩大浏览器窗口时,页面内容也随之扩大来填满页面。

20、冻结布局是:内容的宽度是固定的,不随浏览器窗口的变化而扩大或缩小。这有一个优点是你可以更好地控制你的设计,但代价是不能有效地利用浏览器宽度 。

21、凝胶物布局是:内容区的宽度是固定的,但边界随着浏览器窗口的变化扩大或缩小。凝胶物布局常用 来把内容放在页面的中间。它跟冻结的布局有一样的优点。但总是更引人注目一点。

22、可以把position属性设置为四个值:staticabsolutefixedrelative.

23static是默认布局,把元素放在页面的正常流中。

24、用绝对布置可以把元素放在页面的任何位置。默认状态下,绝对布置相对 于页面边放置元素。

25、如果把一个绝对布置嵌入另一个布置过的元素中,那么它的位置就是相对于布置过的那个包含它的元素。

26toprightbottomleft属性用来放置绝对、固定和相对布置的元素。

27、绝对布置的元素可以用z-index属性互相层叠放置。较大的z-index值表明它在上层(在屏幕上更靠近你)。

28、固定布置的元素总是以相对于浏览器窗口的位置放置,页面滚动时不移动。页面中其他内容在这些元素下面滚动。

29、相对布置的元素先和正常流一样流到页面上,然后按照指定的数字偏移,在它们应该正常显示的地方留出了空间。

30、用相对布置时,letfrighttopbottom涉及到与元素在正常流中的位置相对 的偏移量。

31、通常使用漂移元素或绝对布置的元素可以完成同样的设计。

31float提供了一种形成两栏布局的灵活的解决方法,元素可以把漂移元素从它们身边清理掉,绝对布置做不这点。

posted @ 2013-05-24 15:57  景莉  阅读(212)  评论(0编辑  收藏  举报