CSS的一些属性

CSS有很多基本属性，都是很基础的东西，这些基础的东西就会让以后的学习轻松不少

边框属性
作用：给元素加上一个边框
分为两种形式
第一种

		border-top
			border-bottom
			border-left
			boder-right
			三个属性   粗细  线型  颜色

第二种

			border ：粗细  线型  颜色
			透明色：transparent

轮廓
作用：绘制于元素周围的一条线，位于边框外

属性：			   
				outline-width: 20px;  粗细
				outline-style: solid;   线型
				outline-color: red;	颜色

元素的分类

块级元素：独占一行，对宽高设置有效，如果我们不给宽度的话，撑满整行，如果不给高度，高度会随着内容的变化而变化
行内元素：设置宽高是无效的，不独占一行多个标签是可以同时存在一行的。完全是靠内容撑开的。
行内块元素：不是独占一行，设置宽高有效，并且可以多个标签存在一行。
可以使用 display 来改变元素的分类

盒子模型
盒子模型由内容 内边距 边框 外边距组成
属性：

	边框：border
	内边距：padding   边框和内容之间的距离
		padding 存在一个值     上下左右都是改值
				存在两个值     上下一个值 左右一个值
				存在三个值      上   左右   下
				存在四个值     上右下左
		可以单独的去设置 例如  padding-top
	外边距：margin  元素和元素之间的距离

背景属性
背景属性分为 ：纯色背景（背景颜色） 背景图像

**背景颜色**
		background-color  ：  任意合法的颜色  和  transparent
**背景图像**	
		background-image  ： url（）
**背景图像平铺**
		background-repeat：
			1.repeat  ： 默认值水平垂直方向都平铺
			2.repeat-x：水平方向平铺
			3.repeat-y：垂直方向平铺
			4.no-repeat：  不平铺
**背景图片的尺寸**
		background-size： value1  value2  宽度 和 高度   单位 是PX
		 value%  value%  宽度 和 高度	 单位 是%
		 cover : 全覆盖   将背景图等比放大直到背景图完全覆盖到元素的所有区域
		 contain：包含  将背景图等比放大  ，直到下边或者右边有一个边缘碰到元素为止
						 
**背景图片固定**
		background-attachment: fixed;   
		scroll：滚动  fixed 固定
							
**背景定位**
		改变背景图像在元素中的默认位置
		属性 ：  background-position
		x  y   水平偏移距离 和垂直偏移距离
		单位  ：  px  %  top  left right bottom 

CSS中的 雪碧图、精灵图
作用：将一些小的背景图，合并到大的背景中去，以便实现减少服务器的请求次数。
步骤：
1.我们根据图像的大小创建一个元素
2.将雪碧图作为元素的背景，再通过背景图片定位，实现位置偏移将用户要看到的图像显示在元素中

渐变
1.什么是渐变？
两种或者多种颜色间平滑度过的效果
分类：
1.线型渐变
2.径向渐变
3.重复渐变 加上 repeating
2.渐变的组成
色标：决定了渐变的每种颜色及出现的位置
每个渐变效果都是由多个色标组成（2个以上）

语法：background-image：linear-gradient（方向或者角度，色标。。。。。）
		 linear-gradient()  线型渐变
				 		angle 方向或者角度
				 				to top  从下往上填充  
				 				to left  从右往左
				 				to right  从左往右
				 				to bottom  从上到下
				 				
				 				0   == 0deg（度）  ==to top
				 				90deg  = toright
				 				180deg  = to bottom
				 				270deg = to left
				 		color  颜色
		/*径向渐变
		size at position  径向渐变的位置以及圆心的位置
	     size ： 圆的半径 单位为px
		position ：  x，y 圆心的位置
		px   %    top/left/center/bottom
	    色标   
		background-image: radial-gradient(200px at 50% 50%,red 20%,blue 40%,yellow 80%);