网页设计与制作教程 教学课件 ppt 作者 刘瑞新第8章.pptVIP

机械工业出版社 网页设计与制作 刘瑞新 吴丰 主编 机械工业出版社 第8章 DIV+CSS布局入门 8.1 认识div 8.1.1 什么是div DIV元素是一个块级元素，用来为(X)HTML文档中大块内容提供结构和背景，它可以把文档分割为独立的、不同的部分。在基于Web标准的网站设计中，不再使用传统的表格定位技术，取而代之的是采用DIV+CSS布局方式实现各种定位。 8.1 认识div 8.1.2 使用div标签 1．插入div标签 2．div的嵌套 8.2 AP元素 8.2.1 AP元素与AP Div元素 1．AP元素 2．AP Div元素 8.2 AP元素 8.2.2 使用AP Div 1．插入AP Div 2．连续绘制多个AP Div 3．创建嵌套的AP Div 8.2 AP元素 8.2.3 AP Div的属性设置与相关操作 1．AP Div的属性面板 2．改变AP Div的堆叠顺序 3．调整AP Div的大小 8.3 CSS盒模型 8.3.1 什么是盒模型 盒模型将页面中的每个元素看做一个矩形框，这个框由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。 8.3 CSS盒模型 8.3.2 盒模型的宽度与高度 1．盒模型的宽度 盒模型的宽度=左外边距（margin-left）+左边框（border-left）+左内边距（padding-left）+内容宽度（width）+右内边距（padding-right）+右边框（border-right）+右外边距（margin-right） 2．盒模型的高度 盒模型的高度=上外边距（margin-top）+上边框（border-top）+上内边距（padding-top）+内容高度（height）+下内边距（padding-bottom）+下边框（border-bottom）+下外边距（margin-bottom） 8.3 CSS盒模型 8.3.3 内边距、边框与外边距 1．内边距（padding） 内边距位于元素内容区域与边框之间，影响这个区域的属性是padding属性，默认值为0。该属性的值可以是长度值和百分比值，但不允许是负值。 2．边框（border） 边框是围绕在元素内容与内边距的线。 3．外边距（margin） 在元素边框之外的空白区域就是外边距，使用外边距的目的就是控制元素与元素之间的距离，默认值是0。该属性可以使用任何长度单位，如像素、英寸、毫米或em。 8.3 CSS盒模型 8.3.4 外边距的叠加 1．两个元素垂直相遇时叠加 2．两个元素包含时叠加 8.4 CSS的定位 8.4.1 静态定位（position:static;） 静态定位是position属性的默认值，即该元素出现在文档的常规位置，不会重新定位。 8.4 CSS的定位 8.4.2 相对定位（position:relative;） 相对定位指的是通过设置水平或垂直位置的值，让这个元素“相对于”它原始的起点进行移动。需要特别注意的是，即便是将某元素进行相对定位，并赋予新的位置值，元素仍然占据原来的空间位置，移动后会导致覆盖其他元素。 8.4 CSS的定位 8.4.3 绝对定位（position:absolute;） 用“position:absolute;”表示绝对定位，使用绝对定位的对象可以被放置在文档中任何位置，位置将依据浏览器左上角的0点开始计算。绝对定位的对象可以层叠，层叠的顺序由z-index控制，z-index值越高其位置就越高。 8.4 CSS的定位 8.4.4 相对定位与绝对定位的混合使用 用“position:absolute;”表示绝对定位，使用绝对定位的对象可以被放置在文档中任何位置，位置将依据浏览器左上角的0点开始计算。绝对定位的对象可以层叠，层叠的顺序由z-index控制，z-index值越高其位置就越高。 8.4 CSS的定位 8.4.5 固定定位（position: fixed;） 固定定位其实是绝对定位的子类别，一个设置了position:fixed的元素是相对于视窗固定的，就算页面文档发生了滚动，它也会一直呆在相同的地方。 8.5 浮动与清除浮动 8.5.1 浮动（float） 利用CSS样式布局页面结构时，浮动（float）是使用率较高的一种定位方式。当某个元素被赋予浮动属性后，该元素便脱离文档流向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 8.5