Web课件第五章.ppt

第三章表现层的CSS 续 1 盒子思想 我们介绍了CSS的基本概念盒子模型 根据盒子模型 文档中的每一个元素都产生一个盒子 很多属性 比如 width height padding 和margin属性都可以应用到这个盒子 1 1元素盒子 文档中的每一个元素 都是块级别的和内嵌的 这些元素形成矩形元素盒子 填充 内容区域 空白边 外边缘 边框 内边缘 width height 空白边 内边缘 空白边 内边缘 内容区域元素盒子的核心是内容本身 内边缘内容区域的边缘属于元素盒子的内边缘填充处于内容区域和可选边框之间的区域边框环绕元素和元素填充的线 空白边添加到边框之外的可选空间 空白边总是透明的 允许父元素的背景穿透它并显示 外边缘空白边的外边缘构成了元素盒子的外边缘 这是元素在网页中占的总面积 它的宽度是内容的宽度 以及应用到元素的填充 边框 空白边的宽度的总和 1 2设置内容区域 使用width和height属性指定元素内容区域的宽和高 width height属性值 长度计量值 百分比值 auto inherit默认值 auto使用对象 块级别元素和可替换的内嵌元素是否继承 否 处理溢出 overflow属性值 visible hidden scroll auto inherit默认值 visible使用对象 块级别元素和可替换的内嵌元素是否继承 否 1 3填充 填充是内容区域和边框之间的空间Padding top padding right padding bottom padding left padding属性值 长度计量值 百分比值 auto inherit默认值 auto使用对象 所有元素是否继承 否 1 4边框 边框是环绕内容区域和它的填充的简单的一条线 边框样式边框宽度边框颜色联合使用style width color 1 4 1边框样式 border style border top style border right style border bottom style border left style属性值 none dotted dashed solid double groove ridge inset outset inherit默认值 none使用对象 所有元素是否继承 否 1 4 2边框厚度 border width border top width border right width border bottom width border left width属性值 长度单元 thin medium thick inherit默认值 medium使用对象 所有元素是否继承 否 1 4 3边框颜色 border color border top color border right color border bottom color border left color属性值 颜色名或RGB transparent inherit默认值 元素color的属性值使用对象 所有元素是否继承 否 1 4 4联合使用style width color border border top border right border bottom border left属性值 border style border width border color inherit默认值 每个属性的默认值使用对象 所有元素是否继承 否 1 5空白边 空白边是添加在边框外面的空间 它保证了元素间互不冲撞或不冲撞浏览器窗口的边线 margin margin top margin right margin bottom margin left属性值 长度计量值 百分比值 auto inherit默认值 auto使用对象 所有元素是否继承 否 1 5 1空白边行为 重叠空白边内嵌元素的空白边负空白边 重叠空白边 空白边行为影响最大的是上下空白边与邻近元素的重叠 例 有两个段落 如果上面的元素有一个4em的下空白边 而下面的元素的上空白边为2em 那么元素间的空白边为 应用最大的指定值 而不是相加 4em 内嵌元素的空白边 应用上下空白边到内嵌文本元素 但是它不会在元素上下添加垂直空间 行高也不会改变 然而 当应用左右margin到内嵌文本元素时 在文本流中空白空间会在文本前后清楚出现 即使元素分布在很多行 负空白边 可以给margin属性指定负数值 当应用负空白边时 内容 填充和边框将向相反的的方向移动 2 浮动与定位 浮动一个元素是指左右移动移动元素 并允许接着的文本环绕它 定位是指以像素精确指定元素在网页上的位置 2 1普通流 在CSS布局模型中 文本元素依源代码中的顺序从上到下排列 然后从左到右 块元素一个累一个 填满浏览器窗口或其他窗口元素的所有可用宽度 内嵌元素和文本字符一行接一行的填满块元素 当窗口或窗口元素重置大小的时候 块元素随着新宽度增大或缩小 而内嵌内容重新流动来适应宽度 Abcdefghijklmnopqrstuv Abcdefghijklmnopqrstuv 2 2浮动 浮动属性尽可能远地向左或向右移动元素 允许后面的内容环绕它 它是现代基于CSS网页设计的主要工具之一 用于创建多列布局 列表中的导航工具条和无表格的类表格排列 float属性值 left right none inherit默认值 none使用对象 所有元素是否继承 否 2 2 1浮动内嵌文本元素 2 2 2浮动块元素 2 2 3浮动多个元素 2 2 4清除浮动元素 取消文本环绕 恢复平常布局 可以通过清除你想从浮动元素下面开始排列的元素来完成 应用clear属性到一个元素来防止元素紧接这浮动元素出现 并强制它从下一个可用的浮动元素下面的空间开始 Clear属性值 left right both none inherit默认值 none使用对象 块级元素是否继承 否 2 3定位 CSS提供许多方法个来定位网页中的元素 不幸的是 并不是所有的定位方法都得到良好的支持 在不兼容和有bug的浏览器中很难实现你所追求的结果 2 3 1定位的类型 position属性值 static relative absolute fixed inherit默认值 static使用对象 块级元素是否继承 否 Static 普通的定位方案 元素将如同在普通文档流中一样定位 relative 相对定位将盒子相对于它在流中的原始位置移动 它将保留元素在普通流中占据的空间 Absolute 绝对定位的元素从文档流中完整的移除 并且相对于容器元素定位 它所占据的空间将被关闭 Fixed 固定定位的特性是元素将呆在窗口的一个位置 即使在文档滚动的时候 position属性 确定完定位的方法 就要指定四个偏移属性top right bottom left属性值 长度计量值 百分比值 auto默认值 auto使用对象 可定位元素 元素的position属性值为relative absolute和fixed 是否继承 否 这些值提供了各个元素与相应边距离的偏移属性 top属性值定义了浏览器或其他容器元素的上边缘到元素上边缘的偏移距离 它导致元素盒子以这个值向下移动 bottom和top相反left属性值将向右移动定位元素指定值的距离right和left相反 2 3 2相对定位 相对定位是相对于元素在流中的原始位置移动的 它所占据的空间将被保留 并继承影响周围内容的布局 2 3 3绝对定位 曾经被em素占据的空间现在关闭了 在新位置上 元素与周围内容重叠 偏移值把em元素定位在浏览器窗口左上角下方30像素 右方60px 在绝对定位中实际发生的是元素相对于最近的容器块定位 容器块 CSS2 1介绍声明 元素盒子的位置和尺寸有时相对于某个称为元素的容器块的矩形计算 判断元素容器块的规则 如果定位元素没有包含在另一个定位元素中 那么它将相对于初始容器块确定位置如果元素有一个祖先 比如包含在一个元素中 祖先position的属性设置为relative absolute或fixed 元素将相对于元素的边定位 指定position属性 像素计量值 通过给四个方向设置偏移值 间接设置divb元素的尺寸 diva divb 堆积顺序 z ind