《Head First HTML与CSS、XHTML》第十二章要点

勤奋学习

        本章内容较多且难,不仅介绍关于背景和字体颜色的内容,还介绍了如何用多栏布局进行专业设计。元素的漂移,流动和冻结设计,绝对布置、固定布置、相对布置的区别和用法等等。有点让人头疼,不过还好讲解的并不晦涩,多复习就能够完全理解了。

要点

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

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

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

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

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

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

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

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

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

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

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

12、可以把position属性设置为四个值: static、absolute、fixed和relative。

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

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

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

15、top、right、bottom和left属性用来放置绝对、固定和相对布置的元素。

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

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

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

19、用相对布置时,left、right、top和bottom涉及到与元素在正常流中的位置相对的偏移量。

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

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

继续阅读
各种观点
  1. 老鹰主机:

    CSS我看了就头大

发表观点
  • 昵称不能为空
  • 邮箱不能为空
  • 还是写点什么卅...