定位与渐变

# 定位

元素定位主要在其父元素或页面某个位置进行固定,如:轮播图的左右按钮,或者购物车的数字符号,下拉菜单或侧面菜单

- 定位属性

position:relative;相对定位

相对定位的元素相对的是自己原有的位置

不脱离文档流,对父级元素没有影响

不会因为自己的位置移动,挤开兄弟元素,导致兄弟元素发生位置变化

当兄弟元素间位置发生重合,在相同层级上,会发生遮盖

position:absolute;绝对定位

相对距离自己最近的有定位属性的元素做父级元素,相对该元素定位(左上角默认)

脱离文档流,导致父元素高度坍塌,需要给给父元素加宽度高度

需要移动属性变化位置

使用z-index改变z轴的层叠顺序

块级元素在父级元素中水平垂直都居中的方式

position:fixed;   固定定位

固定定位元素永远参照html窗口

使用四个方向在窗口中定位

常用场景：返回顶部、页头输入区、页尾菜单区

- 移动属性

定位元素一定会发生移动,因此移动属性一定要搭配定位属性使用

top:   正值向下移动,负值向上移动

left:  正值向右移动,负值向左移动

right: 正值向左移动,负值向右移动

bottom:正值向上移动,负值向下移动

- 层叠顺序属性

z-index:值;代表元素z轴的顺序

值要写整数,默认auto,最大21亿多(2147483647)

值越大层级越高

# 渐变

- 线性渐变(多变)

- background-image:liner-gradient(角度，颜色1 起始范围 结束范围 ，颜色2 起始范围 结束范围 ，颜色3 起始范围 结束范围)

1.角度的单位是deg，终点颜色旋转角度(可省 ，默认从上到下)

2.色，所有色值可写

3.起始范围是从颜色的起点开始，自定义颜色的重点.第一个颜色开始边为起点0或者%0,最后一个颜色的结束边为终点,宽度或者高度为100%

4.当两个颜色起点与终点重合时，出现无渐变效果

- 径向渐变 (少变)

-background-image:radial-gradient(x 轴半径 y轴半径 at x轴圆心位置 y轴圆心位置 ,颜色1 起始点 结束点,颜色2 起始点 结束点,...)

- 重复渐变

  background-image

- 对渐变的兼容 浏览器的私有前缀

私有前缀是针对CSS3新属性或值

如果是新属性就加在属性名的前面,如：-私有前缀-border-radius:10px

- 私有前缀

webkit-对应浏览器内核 谷歌(chrome)、苹果(safari)、edge

-moz-对应的浏览器内核火狐(Firefox)

-o-对应的浏览器 欧朋(opera)

-ms-对应的浏览器 IE