CSSday3

1、渐变
2、文本格式化
3、表格
4、浮动
=====================================
1、渐变
1、什么是渐变
多种颜色之间平缓过度的显示效果
2、渐变分类
1、线性渐变(linear-gradient)
按照直线的方式填充渐变颜色和方向
2、径向渐变(radial-gradient)
以圆的方式填充渐变效果(圆心位置，半径)
3、重复渐变
1、重复线性渐变
repeating-linear-gradient
2、重复径向渐变
repeating-radial-gradient
3、渐变中的重要信息
1、色标
由 颜色 及其 出现的位置 来组成的
4、渐变的语法
1、属性
background-image
2、取值
1、linear-gradient()
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


0deg : to top
90deg : to right
180deg : to bottom
270deg : to left
2、color-point
渐变中的色标,由 颜色 及其 出现的位置组成
ex:
1、red 0px
该色标颜色为 red ，位置为填充方向的 0px 处
2、green 50px
该色标颜色为 green,位置为填充方向的 50px 处
3、blue 50%
该色标颜色为 blue，位置为填充方向的 50% 处
4、
linear-gradient(to top,red,blue,green);
自动分配位置
2、radial-gradient()
radial-gradient([size at position,]color-point,color-point)


1、[size at position,] : 允许被省略
size:圆的半径
at : 关键字
position:圆心的位置
1、x y
以px为单位的具体数值
2、x% y%
3、关键字
x : left , center , right
y : top , center, bottom
3、repeating-linear-gradient()
4、repeating-radial-gradient()
5、浏览器兼容性问题
主流浏览器都支持渐变
对于不支持的浏览器，需要添加浏览器前缀的方式实现兼容性
浏览器前缀：
1、Firefox ：-moz-
2、Chrome 和 Safari ：-webkit-
3、Opear ：-o-
4、Microsoft IE ：-ms-
如果浏览器不支持属性的话，则将前缀添加到属性名称前
ex:
animation:值;
-moz-aniamtion:值;
-webkit-aniamtion:值;
-o-aniamtion:值;
-ms-animation:值;
如果浏览器支持属性，但不支持属性值的话，则将前缀添加到属性值前
ex:
background-image:linear-gradient();
background-image:-moz-linear-gradient();
background-image:-webkit-linear-gradient();
background-image:-o-linear-gradient();
background-image:-ms-linear-gradient();
2、文本格式化
1、字体属性
1、指定字体
属性：font-family
取值：字体1,字体2,字体3;
注意：字体中包含中文或特殊字符的话，尽量使用 "" 引起来 
ex:
font-family:"微软雅黑",Arial;/*若没有微软雅黑则显示Arial，如果还没有就显示浏览器自带的字体*/
2、字体大小
属性：font-size
取值：px 或 pt 为单位的数值/small/medium/large/em
3、字体加粗
属性：font-weight
取值：
1、normal
非加粗显示，正常体
2、bold
加粗显示 <b></b>
3、400 ~ 900(value)
400 ：normal
900 ：bold
4、字体样式
属性：font-style
取值：
1、normal
正常体
2、italic
斜体 <i></i>
3、oblique
倾斜的字体
5、小型大写字符
效果：将小写英文字符变成大写，但是大小和小写字符一样
属性：font-variant
取值：
1、normal
正常，默认值
2、small-caps
小型大写字符
6、字体属性
属性：font
取值：style variant weight size family;
注意：该简写属性中，必须包含 family 的值
7、总：font:font-style font-variant font-weight font-size/line-height font-family  不设置值，按默认
2、文本属性
1、文本颜色
属性：color
取值：~
2、文本排列
作用：控制内容的的水平对齐方式
属性：text-align
取值：left/center（只是文字、图片居中、框不可以，框用margin：0 auto）/right/justify(两端对齐)
3、文本修饰
线条修饰
属性：text-decoration
取值：
1、none
无线条修饰
2、underline
显示下划线
3、line-through
显示删除线 <s></s>
4、overline
显示上划线
4、行高
作用：一行数据的高度
属性：line-height
取值：以px为单位 或 当前字体大小的倍数
line-height:50px;
line-height:1.5;
注意：文字将在指定行高的范围内垂直居中显示
场合：
1、文字垂直居中
2、行间距的设置
/*单行：value与height相同，多行：line-height可以增加行距*/
5、文本阴影
属性：text-shadow
取值：h-shadow v-shadow blur color;（一般hv-shadow不大于2px）
6、首行文本缩进
text-indent：value/em;/*若有多个段落需首行文本缩进，则每一段放进每一个p里*/ 
/*
1、溢出
处理空白：white-space:normal/nowrap(不换行)；
 text-overflow:clip剪掉/ellipsis以...出现
2、换行
word-wrap:break-word/normal--长单词换行
word-break:normal/break-all(随意换行)/keep-all（长单词不换行）--文本换行
3、间距
word-spacing 单词之间有间距
letter-spacing 英文与英文之间的间距/汉字之间
*/
3、表格
1、表格常用属性
1、边距属性
padding，margin(不能为td设置margin)
2、尺寸属性
width,height
3、文本格式化属性
font-*,text-*,line-height,color,... ...
4、背景属性backkground
颜色，图片，渐变
5、border属性
6、垂直方向对齐
属性：vertical-align
取值：top / middle / bottom
7、水平方向对齐
属性：text-align
取值：left / center / right
2、表格特有属性
1、边框合并属性
属性：border-collapse
取值：
1、separate
默认值
2、collapse
合并（双线边框变成单线边框）
2、边框边距
类似于 cellspacing
属性：border-spacing
取值：
1、指定1个值
每个单元格的水平和垂直间距相同
2、指定2个值
第一个值，表示水平间距
第二个值，表示垂直间距
注意：
必须保证border-collapse是separate时才有效
3、标题位置
默认情况下，标题表格上方，水平居中
属性：caption-side
取值：
1、top
默认值
2、bottom
底部
4、显示规则
作用：指定浏览器如何来布局一张表格(指定行和列的尺寸的计算模式)
属性：table-layout
取值：
1、auto
自动，即自动表格布局，默认值
列的宽度高度实际上是由内容来决定的
2、fixed
固定，即固定表格布局。
列的宽度和高度由设定的值决定
自动表格布局 VS 固定表格布局
1、自动表格布局
1、单元格的大小会适应内容
2、表格复杂时，加载速度较慢(缺点)
3、适用于不确定每列大小时使用
4、特别灵活(优点)
2、固定表格布局
1、尺寸取决于设定的值，与单元格内容无关
2、任何情况下，都会加速显示表格(优点)
3、不够灵活(缺点)
推荐：
复杂的布局不能使用table
简单，显示数据的布局，可以使用table