06科大讯飞CSS浮动与定位课稿.ppt

* static :　 默认值。无特殊定位，对象遵循HTML定位规则 absolute :　 将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义 relative :　 对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置 * * 问题：center的边框哪去了？ 答案：content是absolute定位，也即是从文档流中拖出来了，不占据页面控件，所有没有把center撑开。 * 问题：center的边框哪去了？ 答案：content是absolute定位，也即是从文档流中拖出来了，不占据页面控件，所有没有把center撑开。 * * 问题：center的边框哪去了？ 答案：content是absolute定位，也即是从文档流中拖出来了，不占据页面控件，所有没有把center撑开。 * static :　 默认值。无特殊定位，对象遵循HTML定位规则 absolute :　 将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义 relative :　 对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置 * * * * * * * * * * * * * * 演示DEMO在… * * 元素层次 元素层次 为每个元素指定一个数字（z-index）。数字较大的元素将叠加在数字较小的元素之上。 仅作用于position为relative或absolute元素上 * 元素层次 元素层次 示例：按顺序叠放扑克牌，使每张牌都可见 img style=position: absolute; top: 10px; left: 10px; z-index: 1;“ src=“../images/10.gif” alt=10 / img style=position: absolute; top: 30px; left: 30px; z-index: 2;“ src=“../images/j.gif” alt=j / img style=position: absolute; top: 50px; left: 50px; z-index: 3; src=“../images/q.gif” alt=q / … * zindex/zindex.htm 元素层次 元素层次 元素默认的z-index属性值为0。 如果把第一个图片的z-index改为 -1，则效果图： * zindex/zindex1.htm 单元目录 盒子模型 浮动元素 定位元素 元素层次 显示隐藏元素 * 显示隐藏元素 display block 块对象的默认值。对象之后添加新行。? none 隐藏对象。隐藏的对象不占据物理空间。 inline 内联对象的默认值。对象后不添加行。 * 显示隐藏元素 display div class=box 美国两位总统候选人7日晚在span style=display: inline;b田纳西州/b/span贝尔蒙特大学举行了第二场辩论。 /div div class=box 美国两位总统候选人7日晚在span style=display: block;b田纳西州/b/span贝尔蒙特大学举行了第二场辩论。 /div div class=box 美国两位总统候选人7日晚在span style=display: none;b田纳西州/b/span贝尔蒙特大学举行了第二场辩论。 /div * display/display.htm 显示隐藏元素 display div class=box 美国两位总统候选人7日晚在span style=display: inline;b田纳西州/b/span贝尔蒙特大学举行了第二场辩论。 /div div class=box 美国两位总统候选人7日晚在span style=display: block;b田纳西州/b/span贝尔蒙特大学举行了第二场辩论。 /div div class=box 美国两位总统候选人7日晚在span style=display: none