1.定位:
定位组成 : 定位=定位模式+边偏移
-
定位模式:
值 | 语义 |
static | 静态定位 |
relative | 相对定位 |
absolute | 绝对定位 |
fixed | 固定定位 |
-
边偏移
定位的盒子移动到最终的位置。有top、bottom、left、right 属性。
2. 相对定位
绝对定位是元素在移动时,相对于它原来的位置来移动的。
选择器 {
position: relative;
}
特点:
- 它是相对于自己原来的位置来移动的
- 原来的标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它(不脱标,继续保留原来的位置)
3.绝对定位
绝对定位是元素在移动时,相对于它祖先元素来移动的。
选择器 {
position: absolute;
}
- 如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位
- 如果祖先元素有定位(相对、绝对、固定定位),则以最近一级的有定位祖先元素为参考点移动位置。
- 绝对定位不再占有原先的位置(脱标)
4.盒子阴影
box-shadow属性:添加阴影
box-shadow:h-shadow v-shadow blur spread color inset;
注:
1.默认的是外阴影(outset),但是不可以写这个单词,否则导致阴影无效
2.盒子阴影不占用空间,不会影响其他盒子排列。
3.鼠标经过时添加影子:
div:hover{
box-shadow:h-shadow v-shadow blur spread color inset;
}
5.文字阴影
text-shadow属性:给文本添加阴影
text-shadow:h-shadow v-shadow blur color;