CSS渐变、文本、表格、浮动
1.渐变
1.渐变指的是多种颜色平缓变化的一种显示效果
2.主要因素：色标（一种颜色 及其 出现的位置），一个渐变是由多个色标组成(至少两个)
3、渐变分类
（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
表示渐变里各个颜色出现的位置
取值：颜色以及位置的组合，中间用空格隔开
1、red 0% 在填充方向的开始位置处颜色为 红色 2、green 50% 到填充方向一半的位置处，颜色变为绿色 3、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);
}
2、文本格式化属性
1.字体属性
（1）指定字体
属性：font-family
取值：用 , 隔开的字体名称列表
font-family:"微软雅黑",Arial; font-family:"microsoft yahei",Arial,"simhei","宋体"
（2）字体大小
属性：font-size
取值：以 px 或 pt 为单位的数字
（3）字体加粗
属性：font-weight
取值：
1、bold ：加粗 2、normal ：正常 3、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
取值：
1、none : 无任何的线条修饰 2、underline : 下划线修饰 3、line-through : 删除线 4、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
作用：指定单元格数据的垂直对齐方式
取值：
1、top ：上对齐 2、middle ：居中对齐 3、bottom ：下对齐
2.表格的特用属性
（1）边框合并
属性：border-collapse
取值：
1、separate 默认值，即分离边框模式 2、collapse 边框合并
（2）边框边距
作用：设置单元格之间或单元格与表格之间的距离
属性：border-spacing
取值：
1、给定一个值 ：水平和垂直的间距相同 2、给定两个值 ： 第一个值 表示的是水平间距 第二个值 表示的是垂直间距
注意：只有在分离边框模式下，边框边距才有效
（3）标题位置
属性：caption-side
取值：
top ：默认值，标题在表格内容之上 bottom ：标题在表格内容之下
（4）显示规则
作用：用来帮助浏览器指定如何布局一张表，也就是指定 td 尺寸的计算方式
属性：table-layout
取值：
1、auto 默认值，即自动表格布局，列的尺寸实际上是由内容来决定的 2、fixed 固定表格布局，列的尺寸由设定的值为准的
4.浮动定位
1.语法
属性：float
取值：
1、none 默认值，即无任何浮动效果 2、left 左浮动，让元素停靠在父元素的左边，或挨着左侧已有的浮动元素 3、right 右浮动，让元素停靠在父元素的右边，或挨着右侧已有的浮动元素
2.浮动引发的特殊效果
（1）当父元素显示不下所有已浮动子元素时，最后一个将换行，但是，有可能被卡住
（2）元素一旦浮动起来后，宽度将以内容为主(未指定宽度情况下)
（3）元素一旦浮动起来后，将变为块级元素；允许修改尺寸，能正常处理垂直方向外边距
（4）文本，行内元素，行内块元素是采用环绕的方式来排列的，是不会被浮动元素压在底下的，而会巧妙的避开浮动元素
3.清除浮动所带来的影响
元素一旦浮动起来之后，就会对后续的元素带来一定的位置影响(后续元素要上前占位)，如果后续元素不想被影响的话(不想占位)，那么就可以通过清除浮动的方式来解决
属性：clear
取值：
1、none 默认值，不做任何的清除浮动操作 2、left 清除当前元素前面元素左浮动所带来的影响 3、right 清除当前元素前面元素右浮动所带来的影响 4、both 清除当前元素前面元素任何一种浮动所带来的影响