css盒子模型及阴影

1.定位：

    定位组成    :  定位=定位模式+边偏移

• 定位模式：

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

• 边偏移

 定位的盒子移动到最终的位置。有top、bottom、left、right 属性。

2. 相对定位

绝对定位是元素在移动时，相对于它原来的位置来移动的。

选择器 {

    position: relative;

}

特点：

1. 它是相对于自己原来的位置来移动的
2. 原来的标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来的位置）

3.绝对定位

绝对定位是元素在移动时，相对于它祖先元素来移动的。

选择器 {

    position: absolute;

}

1. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位
2. 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
3. 绝对定位不再占有原先的位置（脱标）

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;