1、渐变
1、什么是渐变
多种颜色平缓变化过渡的效果
2、渐变的核心
色标 ：表示颜色值 以及 颜色出现的位置
在一个渐变过程中允许出现多个色标
3、渐变的分类
1、线性渐变(linear-gradient)
2、径向渐变(radial-gradient)
3、重复线性渐变(repeating-linear-gradient)
4、重复径向渐变(repeating-radial-gradient)
4、渐变的语法
属性：background-image
取值：
1、线性渐变
background-image:linear-gradient();
2、径向渐变
background-image:radial-gradient();
3、重复线性渐变
background-image:repeating-linear-gradient();
4、重复径向渐变
background-image:repeating-radial-gradient();
详解：
1、线性渐变
background:linear-gradient(angle,color-point1,color-point2,...);
1、angle:表示渐变的方向 或 角度
1、可以取值为关键字
1、to top
从下向上填充所有的渐变色
2、to right
从左向右填充所有的渐变色
3、to bottom
从上向下填充所有的渐变色
4、to left
从右向左填充所有的渐变色
2、可以取值为具体的角度值
范围 0deg ~ 360deg
1、to top
对应 0deg
2、to right
对应 90deg
3、to bottom
对应 180deg
4、to left
对应 270deg
2、color-point :表示 色标
色标：颜色的值及其出现的位置
语法：将 颜色 以及 位置 中间用 空格隔开即可
1、red 0%
2、green 50%
3、blue 100px
background:linear-gradient(to top,blue 100px,red 200px)
4、background:linear-gradient(to top,red,green,blue);
2、径向渐变
background:radial-gradient([size at position,]color-point1,color-point2,...);
1、size at position
可以省略不写
size : 表示的是圆的半径
at : 关键字，在此处不能省略
position : 圆心位置
3、重复线型渐变
background:repeating-linear-gradient(to top,red 0%,green 50%);
5、浏览器兼容性问题
渐变是CSS3新特性
到目前位置，各款浏览器的较高的版本都已经支持渐变，对于不支持渐变的版本，可以尝试着添加浏览器的前缀，让其支持渐变。如果加了前缀还不支持的话，那么该浏览器则无法正常显示渐变了。
Google Chrome ：-webkit-
Mozilla Firefox : -moz-
Apple Safari : -webkit-
Opera Opera : -o-
浏览器前缀如何加？？？
1、如果浏览器不支持属性的话，则将前缀增加在属性名称前
animation: 值;
-webkit-animation:值;
-moz-animation:值;
-o-animation:值;
2、如果浏览器不支持属性值的话，则将前缀增加在属性值的前面
background:linear-gradient();
background:-webkit-linear-gradient();
background:-moz-linear-gradient();
bakcground:-o-linear-gradient();
2、文本格式化属性
1、字体
1、字体系列
属性：font-family
取值：以 , 隔开的字体值的列表
ex:
font-family:"微软雅黑",Arial,"华文彩云";
2、字体大小
属性：font-size
取值：px,pt,em,rem
ex:
font-size:12px;
注意：两个英文字符的宽度 等同于 一个中文字符
3、字体加粗
属性：font-weight
取值：
1、normal
非加粗显示
2、bold
加粗显示文本
3、value
400 ~ 900
400 ：normal
900 ：bold
4、字体样式
属性：font-style
取值：
1、normal
非斜体显示
2、italic
斜体显示
5、小型大写字母显示
Aa Cc Bb
作用：将小写字母变为大写，但是大小跟小写字母一样
属性：font-variant
取值：
1、normal
正常
2、small-caps
6、字体属性 - font
font:style variant weight size family;
注意：使用简写方式时，必须要设置font-family的值，否则无效
ex:
font:12px;
font:12px "宋体";
2、文本属性
1、文本颜色
属性：colo
取值：颜色值
2、文本排列
作用：控制文本，图像，行内块元素 在父元素中的水平排列方式
属性：text-align
取值：left/center/right/justify
3、文本修饰
属性：text-decoration
取值：
1、none ：无修饰
2、underline ：下划线
3、overline ：上划线
4、line-through ：删除线
4、行高
作用：一行数据所占的高度,如果行高高于文字高度的话，那么文字将在指定行高范围内垂直居中显示
属性：line-height
取值：px 或 当前字体的倍数-无单位的数字
ex:
div{
font-size:12px;
line-height:2;
}
5、首行文本缩进
作用：指定第一行的文本向右缩进多少距离
属性：text-indent
取值：缩进距离，以px为单位的数值
6、文本阴影
属性：text-shadow
取值：h-shadow v-shadow blur color;
3、表格
1、表格常用属性
1、边距属性 - 内边距(padding)
2、尺寸属性 - width ，height
3、边框属性 - borde
4、文本格式化属性
5、背景属性
6、垂直方向对齐
属性：vertical-align
取值：top / middle / bottom
2、表格特有属性
1、边框合并
属性：border-collapse
取值：
1、separate
默认值，即分离边框
2、collapse
边框合并
2、边框边距
作用：设置 相邻的两个单元格 或 表格之间的距离
属性：border-spacing
取值：
1、取1个数字
每个单元格之间的水平 和 垂直的间距是相同的
2、取2个数字
第一个数字表示水平间距
第二个数字表示垂直间距
注意：必须保证表格实在 分离边框(border-collapse:separate;) 模式下才能用该属性
3、标题位置
属性：caption-side
取值：
1、top
默认值，将标题放在表格之上
2、bottom
将标题放在表格之下
4、显示规则
1、作用
告诉浏览器如何布局一张表，指定表格的计算模式
2、语法
属性：table-layout
取值：
1、auto
自动，自动表格布局，默认布局方式，单元格的尺寸实际上是由内容来决定的
2、fixed
固定，固定表格布局，单元格的尺寸是以设定的值为准，不会通过内容而改变布局
3、自动表格布局 VS 固定表格布局
1、自动表格布局
1、单元格的大小会适应内容的大小
2、加载复杂表格时速度较慢(缺点)
3、灵活性较高(优点)
4、在不确定每列大小时优先使用
2、固定表格布局
1、单元格的大小由设定的值来决定的
2、加载时速度较快(优点)
3、灵活性太低(缺点)
4、在确定每列大小时使用
4、浮动
1、定位
所谓的定位指的就是页面元素在页面中的位置
2、定位的分类
1、普通流定位
2、浮动定位
3、相对定位
4、绝对定位
5、固定定位
3、定位 - 普通流定位
普通流定位，又称为 文档流定位 ，页面元素的默认定位方式
特点：
1、每个元素在页面中都会占据一定的空间
2、每个元素都是在其父元素中从左上角开始排列
3、每个块级元素在页面中独占一行，每个块级元素都是按照从上到下的方式排列的
4、多个行内元素会在一行中显示，显示不下再换行
问题：如何在页面中解决多个块级元素在一行内的显示问题 ????????
4、定位 - 浮动定位
1、解决的问题
多个块级元素在一行内的显示问题
2、什么是浮动定位 & 特点
将元素设置为浮动定位的话，那么将具备以下几个特点:
1、浮动元素会被排除在文档流之外，即脱离文档流，不占据页面空间，后续元素要上前补位
2、浮动元素会停靠在父元素的左边 或 右边 或 其他已浮动平级元素的边缘上
3、浮动只会在当前行内完成
3、浮动的语法
属性：float
取值：
1、none
默认值，即无任何浮动效果
2、left
左浮动，让元素停靠在父元素的左边 或 左侧已有的浮动元素的边缘上
3、right
右浮动，让元素停靠在父元素的右边 或 右侧已有的浮动元素的边缘上
4、浮动引发的特殊效果
1、元素一旦浮动起来之后，那么都将变成块级元素
块级：
1、允许修改尺寸
2、能够正常的显示 margin 和 padding 效果的
