CSS盒子的定位程序.ppt

定位 Div Span 实验练习 盒子 盒子的定位 主要内容 什么是盒子的定位 静态定位 相对定位 绝对定位 盒子的display属性 课堂实验 什么是盒子的定位 对于CSS进行网页布局来说，“定位”的含义有两种： 1. 广义的定位：将某个元素放置到网页的某个位置。2. 狭义的定位：CSS中的position属性，当然，定位不仅仅由这一个属性来实现。 静态定位 前面没有设置position取值的时候其实都是使用了静态定位，等同于设置了position:static。 示例 相对定位 position:relative 1、相对于原始位置（文档标准流位置）的定位 2、除了设置position:relative之外，还需要设置一定的偏移量，通过left或者right指定水平方向的偏移量，通过top或bottom指定竖直方向的偏移量。示例 注意：left、right、top、buttom这四个属性只有当position取值为absolute/relative/fixed才有效，取值为relative时，表示各边界与原来默认时的距离。 相对定位示例 相对定位的结论： （1）使用相对定位的盒子，会相对于它原本的位置，通过偏移设置到达新的位置。（2）使用相对定位的盒子仍在标准流中，它对父块和兄弟盒子没有任何影响。 先看初始状态。 接着设置子块1相对偏移 再设置子块2的偏移。 相对定位布局 示例 绝对定位 position:absolute 相对定位，偏移是以盒子本身在标准流中的位置为基准的，进行上下左右（top，bottom，left，right）偏移。 而绝对定位是脱离了标准流，以它的“最近”的一个已经定位（明确设置了position且取值不为static）的祖先元素为基准进行偏移，同样进行上下左右（top，bottom，left，right）偏移。 绝对定位示例 先看初始状态（标准流中的三个盒子） 设置盒子二为绝对定位 结果显示，盒子二以浏览器窗口作为定位基准，脱离原先的标准流，而盒子3会紧贴盒子1，好似盒子2不存在一样。 从右上角开始向下和向左各移30px.? 可以看到，基准还是浏览器窗口。 为父div增加一个position:relative.?? 此时，偏移的基准不再是浏览器窗口，而是他的父div了。 绝对定位 position:absolute 绝对定位的结论： （1）使用绝对定位的盒子以它的“最近”的一个已经定位（明确设置了position且取值不为static）的祖先元素为基准进行偏移，如果无已经定位的祖先元素，则以浏览器窗口为基准。（2）使用绝对定位的盒子从标准流中分离，其它的兄弟盒子不受其影响，就好像它不存在一样。 绝对定位布局 示例 盒子的display属性 盒子总的来说分为两类，一类是像div这样竖直排列显示的块级元素，另一类是像span这样在一行上面显示的行内元素。我们还可以通过display属性来设置盒子是块级元素还是行内元素。??示例 由上例可见，我们可以将元素的默认显示方式更改，或者隐藏。还可以设为像表格的单元格一样。??（此效果在Firefox或者IE8.0版本可见效果，如图 示例1-------等高的Div 示例 示例2-------栅格图片显示 示例 课堂实验：完成实验二十二，要检查 课堂实验 定位 Div Span 实验练习 盒子