CSS渐变、文本、表格、浮动

1.渐变

1.渐变指的是多种颜色平缓变化的一种显示效果

2.主要因素：色标（一种颜色 及其 出现的位置），一个渐变是由多个色标组成(至少两个)

三、渐变分类

（1）线性渐变：以直线的方向来填充渐变色

（2）径向渐变：以圆形的方式实现的填充效果

（3）重复渐变：将线性渐变 或 径向渐变 重复几回实现出来

4.线性渐变

属性：background-image

取值：linear-gradient(angle,color-point1,color-point2,...);

（1）angle

表示渐变填充的方向或角度

取值：

  关键字： to top / right / bottom / left  从下向上 / 左向右 / 上向下 / 右向左 填充渐变色  

  角度值：

  0deg：从下向上填充渐变色等同于 to top

  90deg：从左向右填充渐变色等同于 to right

  180deg：从上向下填充渐变色等同于 to bottom

  270deg：从右向左填充渐变色等用于 to left

线性渐变角度值：

（2）color-point

表示渐变里各个颜色出现的位置

取值：颜色以及位置的组合，中间用空格隔开

一、red 0%
	在填充方向的开始位置处颜色为 红色
二、green 50%
	到填充方向一半的位置处，颜色变为绿色
三、blue 200px
	到填充方向的200px的位置处，颜色变为蓝色

//从下向上，颜色由红色向绿色渐变
background:linear-gradient(to top,red 0%,green 100%);
//从左下角开始，颜色由红色到绿色渐变，到50px的位置处变为绿色，并开始由绿色到蓝色渐变
background:linear-gradient(45deg,red 0px,green 50px,blue 100%);

5.浏览器兼容性

各浏览器的新版本都支持渐变属性
对于不支持的浏览器版本，能够经过增长浏览器前缀的方式，让浏览器支持渐变

   Firefox : -moz-

  Chrome & Safari : -webkit-

  Opera : -o-

  IE : -ms-

#container .btn-submit{
	background:linear-gradient(0deg,red,blue);

	background:-moz-linear-gradient(0deg,red,blue);

	background:-webkit-linear-gradient(0deg,red,blue);

	background:-o-linear-gradient(0deg,red,blue);

	background:-ms-linear-gradient(0deg,red,blue);
}

二、文本格式化属性

1.字体属性

（1）指定字体

属性：font-family

取值：用  , 隔开的字体名称列表

font-family:"微软雅黑",Arial;
font-family:"microsoft yahei",Arial,"simhei","宋体"

（2）字体大小

属性：font-size

取值：以 px 或 pt 为单位的数字

（3）字体加粗

属性：font-weight

取值：

一、bold ：加粗
二、normal ：正常
三、value 
	无单位的数字
	等同于 normal
	等同于 bold

//介于正常体与粗体之间
font-weight:700;

（4）字体样式

属性：font-style

取值：

    normal：正常显示

    italic：斜体显示

（5）小型大写字母

将小写字符变为大写，但大小与小写字符一致

属性：font-variant

取值： 

    normal：正常

    small-caps：小型大写字符

（6）字体属性

简写方式

属性：font

取值：style variant weight size family ;

注意：使用简写属性时，必需要设置family的值，不然无效

2.文本属性

（1）文本颜色

属性：color

（2）文本排列

做用：指定文本、行内、行内块元素的水平对齐方式

属性：text-align

取值：left / center / right / justify（两端对齐）

（3）文字修饰

属性：text-decoration

取值：

一、none : 无任何的线条修饰
二、underline : 下划线修饰
三、line-through : 删除线
四、overline : 上划线

（4）行高

做用：一行数据所占高度

属性：line-height

取值：以 px 为单位的数值

注意：若是行高设置的比文字的高度高的话，该行文本将在指定行高范围内垂直居中显示

line-height:30px;
//行高是font-size的1.5倍
line-height:1.5;

（5）首行文本缩进

属性：text-indent

取值：以 px 为单位的数值

（6）文本阴影

属性：text-shadow

取值：h-shadow  v-shaow  blur  color

3.表格

1.表格的经常使用属性

（1）边距属性：padding

（2）边框属性：border

（3）尺寸属性：width ， height

（4）文本格式化属性：font-* ， text-* ， line-height

（5）背景属性：颜色，图片，渐变

（6）vertical-align

  做用：指定单元格数据的垂直对齐方式

  取值：

一、top ：上对齐
二、middle ：居中对齐
三、bottom ：下对齐

2.表格的特用属性

（1）边框合并

  属性：border-collapse

  取值：

一、separate  默认值，即分离边框模式
二、collapse  边框合并

（2）边框边距

  做用：设置单元格之间或单元格与表格之间的距离

  属性：border-spacing

  取值：

一、给定一个值 ：水平和垂直的间距相同
二、给定两个值 ：
	第一个值 表示的是水平间距
	第二个值 表示的是垂直间距

　注意：只有在分离边框模式下，边框边距才有效

（3）标题位置

  属性：caption-side

  取值：

top ：默认值，标题在表格内容之上
bottom ：标题在表格内容之下

（4）显示规则

  做用：用来帮助浏览器指定如何布局一张表，也就是指定 td 尺寸的计算方式

  属性：table-layout

  取值：

一、auto
	默认值，即自动表格布局，列的尺寸其实是由内容来决定的
二、fixed
	固定表格布局，列的尺寸由设定的值为准的

 4.浮动定位

1.语法

属性：float

取值：

一、none
	默认值，即无任何浮动效果
二、left
	左浮动，让元素停靠在父元素的左边，或挨着左侧已有的浮动元素
三、right
	右浮动，让元素停靠在父元素的右边，或挨着右侧已有的浮动元素

2.浮动引起的特殊效果

（1）当父元素显示不下全部已浮动子元素时，最后一个将换行，可是，有可能被卡住

（2）元素一旦浮动起来后，宽度将之内容为主(未指定宽度状况下)

（3）元素一旦浮动起来后，将变为块级元素；容许修改尺寸，能正常处理垂直方向外边距

（4）文本，行内元素，行内块元素是采用环绕的方式来排列的，是不会被浮动元素压在底下的，而会巧妙的避开浮动元素

3.清除浮动所带来的影响

元素一旦浮动起来以后，就会对后续的元素带来必定的位置影响(后续元素要上前占位)，若是后续元素不想被影响的话(不想占位)，那么就能够经过清除浮动的方式来解决

属性：clear

取值：

一、none
	默认值，不作任何的清除浮动操做
二、left
	清除当前元素前面元素左浮动所带来的影响
三、right
	清除当前元素前面元素右浮动所带来的影响
四、both
	清除当前元素前面元素任何一种浮动所带来的影响