第6章DIV+CSS.ppt

第一节 DIV+CSS的概述 业界对DIV+CSS的标准化设计关注 DIV+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准 传统的网页布局是使用表格 DIV+CSS布局 这个布局中，div承载的是内容，而css承载的是样式。 CSS盒模型 DIV 层标签 SPAN 标签 第三节 CSS定位与显示 CSS的定位与显示属性可以把一个HTML元素定位在网页中的任何位置 定位与布局密切相关 CSS中有三种基本的定位机制 普通流：显示的位置由元素在HTML文件中的位置决定 浮动：可以左右移动，直到碰到包含框或其它浮动框 绝对定位：可以直接将元素定位在页面上地任何位置 层叠顺序 进行CSS定位时，有可能发生多个元素的重叠 需要设置元素在Z轴上的层叠顺序 与定位相关的属性主要有14个 普通流定位机制 按照元素的类型和在HTML源文件中的出现顺序进行定位 就是block元素（如p、h、div）（块级框）从上到下一个接一个的排列 inline元素（如span、strong元素）在行中水平布置 除非特殊的指定，否则所有的框都在普通流中定位 浮动（float） 浮动框可以左右移动，直到它的外边缘碰到包含框或另一浮动框的边缘 当元素浮动时，它将不再处于普通文档流中，相当于浮在文档之上，不占据空间，但是会缩短行框，产生文字环绕的效果 Clear属性 如果要为浮动元素留出垂直空间，使其它的元素不在其两侧显示，可以对其周围的元素使用清理属性 添加了clear属性的元素，通过自动增加空白边，达到留出垂直空间的效果 相对定位--relative 相对于元素在普通文本流中的初始位置 如果一个元素进行相对定位，它将以它所在的位置(即它在普通流中的位置)为初始点，然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的初始点进行移动 绝对定位--absolute 可以把某个元素精确的定位在某个地方 绝对定位使元素的位置与文档流无关，因此不占据普通流中的空间，普通文档流中其他元素的布局就像绝对定位的元素不存在时一样 绝对定位的元素的位置是相对于最近的父元素而言的 固定定位 是绝对定位的一个特殊情况 与绝对定位相似，唯一不同的是绝对定位是相对于父元素的某一个位置，而固定定位则是固定在浏览器的视框位置 这样当窗口滚动时，固定定位的元素不会随之滚动，总是出现在屏幕的固定位置 Overflow、Visibility、display、Z-index属性 Overflow－－内容超过层大小时 Overflow、Visibility、display、Z-index属性 display-－设置对象显示方式(可以各种不同的方式显示对象) 使用CSS布局技术可以完成页面整体布局，实现各种布局样式 CSS布局技术都基于三个基本概念：定位、浮动和空白边操纵 基本布局方式有很多 按外观分，有单列布局、两列布局、三列布局等 按实现技术分，有基于自动空白边的布局、浮动布局等 按适应性分，有固定宽度布局、流式布局，弹性布局等 §4.2 设计DIV块位置 Div+CSS常见错误总结 1. 检查HTML元素是否有拼写错误、是否忘记结束标记 2. 检查CSS是否正确 3. 确定错误发生的位置 　　如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。 4. 利用border属性确定出错元素的布局特性 　　使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。 5. float元素的父元素不能指定clear属性 　　MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。这是MacIE的著名的bug，倘若不知道就会走弯路。 6. float元素务必指定width属性 　　很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。 　　另外指定元素时尽量使用em而不是px做单位。 Div+CSS常见错误总结 7. float元素不能指定margin和padding等属性 　　IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为IE指定特别的值。 8. float元素的宽度之和要小于100% 　　如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。 9. 是否重设了默