CSS与页面布局

学习内容：Css框模型相对定位绝对定位浮动和清理使用css设置页面布局到现在为止，已经学习了如何使用css格式化文本和颜色，现在学习如何使用css设置网页布局，这种技术称为css-p第5章网页样式表CSS———页面布局5.1.1CSS布局页面的优点1．网站浏览者的好处由于页面代码量减少，文件下载速度更快。同时，浏览器显示页面的速度也更快。由于清晰的语义结构，使得内容能被更多的用户（包括部分残障人士）所访问。由于实现了结构和表现相分离，内容能被更多的设备（包括手机、打印机等）所访问。由于样式文件的独立性，用户选择自己喜欢的界面变得更容易。5.1.1CSS布局页面的优点2．网站拥有者的好处由于代码变得更简洁和组件用得更少，使得维护变得很容易。由于对带宽要求的降低，节约了成本。由于页面结构清晰的语义性，使得搜索引擎的搜索变得更容易。5.1.2CSS布局页面的基本思想CSS布局页面的基本思想，就是实现网页结构和表现相分离。内容、结构和表现是一个网页必不可少的组成部分，其中内容是页面传达信息的基础，表现使得内容的传达变得更加明晰和方便，而结构则是内容和表现之间的纽带，内容、结构和表现的具体含义如下所示。内容：是指网页实际要传达的信息，包括文本、图片、音乐、视频、数据、文档等。其中不包括修饰的图片、背景音乐等。网页文档中的每个元素都被视为一个矩形框。如图，该矩形由环绕着内容区的填充（padding）、边框（border）和空白边（margin）组成的。5.2.1框模型内容：内容区域可以由文本和其他网页元素，如图片、段落、标题、列表等相互构成。网页上一个元素的可见宽度就是它的内容宽度、填充宽度和边框厚度的总和。填充：内容和边框之间的那部分区域。默认的填充值为0。边框：位于填充和空白边距之间。默认的边框值为0，且不显示。空白边：用于决定一个元素和任何其它相邻元素之间的空白间隔大小。空白边总是透明的.5.2.1框模型例1：下面显示一个网页，在上面是两个连续放置的div元素，浏览器使用了正常流，将元素按照它们在代码中出现的顺序进行显示。5.2.1框模型例子：box1.htm例2：元素之间可以互相包含，矩形框之间也可以互相包含。5.2.1框模型例子：box2.htm5.3.1相对定位相对定位可以用于小幅修改某个元素的位置，使其显示在新位置上，即相对于正常流情况它应该出现的位置，通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。使用position:relative属性，加上left,right,top属性可以实现相对定位功能。如果将top设置为20px，那么框将在原位置顶部下面20像素的地方。如果left设置为30像素，那么会在元素左边创建30像素的空间，也就是将元素向右移动。5.3css定位概述#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属性来实现元素的浮动Float:left/right5.3.3浮动5.3.3浮动右浮动：请看下图，当把框1向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：5.3.3浮动左浮动：当框1向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框2，使框2从视图中消失。5.3.3浮动如果把所有三个框都向左移动，那么框1向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。5.3.3浮动如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：例子：float.htm5.3.4清理浮动浏览器按照正常流来显示浮动元素，然后将它们转移到所在容器的左侧或右侧最远端，其他内容将环绕在悬浮元素的周围，要停止这种环绕，使用clear属性，clear的属性值可以是left、right、both或none,它表示框的哪些边不应该挨着浮动框。5.3.4清理浮动例子：float3.htm例子：float2.htm为了实现这种效果，在被清理的元素的上外边距上添加足够的空间，使元素的顶边缘垂直下降到浮动框下面：5.4.1display属性有些xhtml元素（如段落、标题）是区块元素。Div也是一个区块元素。浏览器在属于这些元素的行中开始和结束对他们的显示,形成一个个的区块。其它元素，比如锚标记则以内联的方式进行显示（在它们的前面和后面没有换行）。display属性用于设置一个元素是否显示并以何种方式显示。display:none让元素不显示display:block元素当作区块元素进行显示display:inline元素当作行内元素进行显示例子：homepage.htm5.4.2Z-index属性绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素，可以用z-index修改元素在网页上的叠放次序。默认的值为0。如果多个元素出现在页面的相同位置上，z-index值较大的元素将放在值小的元素上面。5.5页面布局所有的设计第一步就是构思，以下是构思好的布局图：5.5页面布局据构思图来规划一下页面的布局，仔细分析一下该图，图片大致分为以下几个部分：1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；2、内容部分又可分为侧边栏、主体内容；3、底部，包括一些版权信息。有了以上的分析，就可以很容易的布局了，设计层如下图:5.5页面布局根据上图，画一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。5.5页面布局DIV结构如下：│body{}/*这是一个HTML元素，具体就不说明了*/└#Container{}/*页面层容器*/├#Header{}/*页面头部*/├#PageBody{}/*页面主体*/│├#Sidebar{}/*侧边栏*/│└#MainBody{}/*主体内容*/└#Footer{}/*页面底部*/页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。