CSS盒子的定位探索.pptVIP

定位 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的偏