CSS 渐变和 浮动

渐变

	渐变：两种或者多种颜色间平滑过渡的效果
	渐变分为  线性渐变     径向渐变

线性渐变

	语法 ：  background-image:linear-gradient
	例子：
		background-image: linear-gradient(to top ,green ,yellow ,red );
	其中to top 可以用 to left ,to right,to buttom 替换
	 还可以用角度表示:   0deg-360deg
	 颜色代表色标   用‘，’进行分割
	 后面空格加 px值 或者百分比可以调整渐变颜色区域大小

重复线性渐变为：

     background-image: repeating-linear-gradient
	 只是在linear前面加 repeating-，其他基本一致
	 例子：
	 background-image: repeating-linear-gradient(90deg ,green 10%,yellow 20%,red 50%);

径向渐变

	语法： background-image：radial-gradient
		   [size at position] : 径向渐变的半径  以及  圆心的位置
			size  半径  position 圆心的位置
	例子：
		background-image: radial-gradient( 300px at center center,red,green ,blue);
		其中 圆心表现方式有三种
  			1.（x，y的坐标）
			2. 百分比
		    3.关键字  top  bottom left right center
		后面颜色与线性渐变一样。

重复径向渐变

    语法：语法： background-image：repeating-radial-gradient
	例子：
		background-image: repeating-radial-gradient(300px at center center ,red 20%,yellow 40%,orange 50%);

浏览器的兼容性

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

浮动

	有几个特点：
	1.浮动元素脱离了普通的文档流不占据页面空间的其他没有浮动的元素会自动上前部位
	2.浮动元素会停靠在父级元素的左边或者右边，或者停靠在其他已经浮动的元素的边缘上
	3.浮动元素只会在当前行内浮动
	4.浮动元素依然位于父元素内
	5.让多个元素在一行内显示
	
	语法：float： left（左浮动） right（右浮动） none（默认，无浮动的效果）

清除浮动：

如果元素浮动起来之后，除了影响到自己的位置还会影响到后续的元素
在这样的情况下 不想被前面浮动元素影响的话  可以使用清除浮动来解决这个问题。
语法;
	clear：
		left：清除当前元素前面的元素左浮动带来的影响（只和自己相关，并不和前面的元素相关） 当前元素不会向
		前占位并且左边不允许有浮动元素。
    	right：清除当前元素前面的元素右浮动带来的影响，当前元素不会向前占位并且右不允许有浮动元素。
		both：清除当前元素前面的元素左浮动和右浮动带来的影响，当前元素不会向前占位并且左右不允许有浮动元素。
				
	    浮动元素对父元素带来的影响
			由于浮动元素脱离了文档流所以导致不占据父元素页面空间
			解决问题：
				1.直接给父级元素设置高度
					弊端：必须要知道父级准确的高度
				2.设置父级元素的浮动
					弊端：对后续的元素会有影响
				3.设置父级元素overflow  hidden或auto
					弊端：如果子级溢出的话  会一起被 隐藏
				4.在父元素中追加一个空元素（子元素）并且设置他clear：both