前端（五）

前端（五）

一、渐变

1.什么是渐变？

两种或者多种颜色间平滑过渡的效果

2.分类

1.线性渐变

2.径向渐变

3.线性渐变

语法： background-image:linear-gradient
线性渐变：
angle: :方向或角度 表示渐变的方向
关键字：
1.to top 从下往上渐变
2.to left 从右往左渐变
3.to bottom 从上往下渐变
4.to right 从左往右渐变
角度：
0deg~360deg
0 = to top
90 = to right
180 = to bottom
270 = to left
颜色1，颜色2，颜色3。。。。
色标：，表示每个颜色值，及其出现的位置，多个色标之间用‘，’进行分割，
如果不写色标的位置每个将平分元素的区域
径向渐变：
语法： background-image：radial-gradient
径向渐变：
[size at position] : 径向渐变的半径 以及 圆心的位置
size 半径 position 圆心的位置
圆心的定位：
bottom  圆心的下定位
left 圆心的左定位
right  圆心的右定位
center 圆心的中间定位

二、浏览器的兼容性

各格主流浏览器的主流版本，都可以支持渐变的，
对于不支持渐变的浏览器，可以尝试增加，浏览器的前缀，就会实现显示
浏览器的前缀：
firefox：火狐浏览器 -moz-
chrome：谷歌浏览器 -webkiit-
safari：苹果自带浏览器 -webkiit-
opera ：-o-
前缀的加载位置：
1.如果浏览器不支持属性的话，则将前缀加载到属性名称前
2.如果浏览器支持属性，但是不支持属性值 将前缀加到属性值的前面

三、浮动

1.定位

所谓定位，实际上就是定义元素框相对其正常位置，应该出现在哪儿。
简单说： 定位就是改变元素的页面上的默认的位置

2.定位的分类

1.普通流定位（元素默认的定位方式）

2.浮动定位

3.相对定位

4.绝对定位

5.固定定位

3.定位-普通流定位

文档流定位是页面元素的默认定位方式
页面中的块级元素按照从上到下的排列方式每一个元素时独占一行的
页面中的行内元素按照从左到右的排列方式，当前行装不了（溢出）会自动换行

4.浮动定位

1.浮动定位的概述

如果我将元素设置了浮动定位那么具备以下几个特点：
1.浮动元素脱离了普通的文档流不占据页面空间的其他没有浮动的元
素会自动上前部位
2.浮动元素会停靠在父级元素的左边或者右边，
或者停靠在其他已经浮动的元素的边缘上
3.浮动元素只会在当前行内浮动
4.浮动元素依然位于父元素内
5.让多个元素在一行内显示

2.语法：

float： left（左浮动） right（右浮动） none（默认，无浮动的效果）

3.清除浮动：

如果元素浮动起来之后，除了影响到自己的位置还会影响到后续的元素
在这样的情况下 不想被前面浮动元素影响的话 可以使用清除浮动来解决这个问题。
语法;
clear：
left：清除当前元素前面的元素左浮动带来的影响（只和自己相关，
并不和前面的元素相关）
当前元素不会向前占位并且左边不允许有浮动元素。
right：
清除当前元素前面的元素右浮动带来的影响，
当前元素不会向前占位并且右不允许有浮动元素。
both：
清除当前元素前面的元素左浮动和右浮动带来的影响，
当前元素不会向前占位并且左右不允许有浮动元素。
all： 与both有相同的效果，不过只有IE浏览器中可以进行运行
并且有效果。需要谨慎使用！！！

！！！浮动元素对父元素带来的影响：
由于浮动元素脱离了文档流所以导致不占据父元素页面空间
解决问题：
1.直接给父级元素设置高度
弊端：必须要知道父级准确的高度
2.设置父级元素的浮动
弊端：对后续的元素会有影响
3.设置父级元素overflow hidden或auto
弊端：如果子级溢出的话 会一起被隐藏
4.在父元素中追加一个空元素（子元素）并且设置他clear：both