CSS及页面布局.pptVIP

* 学习内容： Css框模型 相对定位 绝对定位 浮动和清理 使用css设置页面布局 到现在为止，已经学习了如何使用css格式化文本和颜色，现在学习如何使用css设置网页布局，这种技术称为css-p 第5章 网页样式表CSS———页面布局 5.1.1 CSS布局页面的优点 1．网站浏览者的好处 由于页面代码量减少，文件下载速度更快。同时，浏览器显示页面的速度也更快。 由于清晰的语义结构，使得内容能被更多的用户（包括部分残障人士）所访问。 由于实现了结构和表现相分离，内容能被更多的设备（包括手机、打印机等）所访问。 由于样式文件的独立性，用户选择自己喜欢的界面变得更容易。 5.1.1 CSS布局页面的优点 2．网站拥有者的好处 由于代码变得更简洁和组件用得更少，使得维护变得很容易。 由于对带宽要求的降低，节约了成本。 由于页面结构清晰的语义性，使得搜索引擎的搜索变得更容易。 5.1.2 CSS布局页面的基本思想 CSS布局页面的基本思想，就是实现网页结构和表现相分离。 内容、结构和表现是一个网页必不可少的组成部分，其中内容是页面传达信息的基础，表现使得内容的传达变得更加明晰和方便，而结构则是内容和表现之间的纽带，内容、结构和表现的具体含义如下所示。 内容：是指网页实际要传达的信息，包括文本、图片、音乐、视频、数据、文档等。其中不包括修饰的图片、背景音乐等。 网页文档中的每个元素都被视为一个矩形框。如图，该矩形由环绕着内容区的填充（padding）、边框（border）和空白边（margin）组成的。 5.2.1 框模型 内容： 内容区域可以由文本和其他网页元素，如图片、段落、标 题、列表等相互构成。网页上一个元素的可见宽度就是它的内容宽度、填充宽度和边框厚度的总和。 填充：内容和边框之间的那部分区域。默认的填充值为0。 边框：位于填充和空白边距之间。默认的边框值为0，且不显示。 空白边：用于决定一个元素和任何其它相邻元素之间的空白间隔 大小。空白边总是透明的. 5.2.1 框模型 例1：下面显示一个网页，在上面是两个连续放置的div元素，浏览器使用了正常流，将元素按照它们在代码中出现的顺序进行显示。 5.2.1 框模型 例子：box1.htm 例2：元素之间可以互相包含，矩形框之间也可以互相包含。 5.2.1 框模型 例子：box2.htm 5.3.1 相对定位 相对定位可以用于小幅修改某个元素的位置，使其显示在新位置上，即相对于正常流情况它应该出现的位置，通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 使用position : relative属性，加上left, right, top属性可以实现相对定位功能。 如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。 5.3 css定位概述 #mybox { position: relative; left: 30px; top: 20px; } 5.3.1 相对定位 注意:在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。 绝对定位：用于某个元素在浏览器窗口中的确切位置(即绝对像素素位置)。 绝对定位使元素的位置与文档流无关，因此不占据空间，普通文档流中的其它元素的布局就象绝对定位的元素不存在时一样。 设置它用position: absolute属性，加上left、top属性。 5.3.2 绝对定位 #box_absolute { position: absolute;  left: 30px; top: 20px; } 5.3.2 绝对定位 5.3.2 绝对定位 注意： 对于定位的主要问题是要记住每种定位的意义。 相对定位是“相对于”元素在文档流中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么是最初的包含块。（可能html元素是最初的包含块） 例子：abs.htm 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。 使用float属性