20200813冯强

一.CSS文本格式化
1.font-size 设置字体大小
2.font-family 设置字体类型 但是尽量不使用微软（收费）
3.font-weight 加粗字体 400为正常 700加粗 还有其他属性 bold（粗）lighter（细）
4.font-style 设置字体样式 italic(斜体)
5.font-variant 小型大写字母 inherit应该从父元素继承 font-variant 属性的值
6.简写 font:style variant weight size family
至少写两个 size family 且放在最后
7.color 设置字体颜色不要使用英文单词
8.text-align 设置文本对齐方式
9.line-height 行高 特殊值： 和高度相同时垂直居中
10.text-decoration 文本线条修饰 line-throough（贯穿文字）
11.text-indent 首行缩进 1em=16px
12.text-shadow 文本阴影 第一个值左右 第二个值上下
13.border
二.背景
1.background-color 背景颜色
2.background：url() 背景图片
3.background-repeat 平铺 no-repeat不平铺
4.background-position 定位 第一个值左右 第二个值上下 center center 垂直居中
5.background-size 尺寸 cover 填充整个容器图片可能失真 contain 包含 完整显示图片但是可能有空白
6.background-attachment 固定 fixed图片不随鼠标滚动而动
7.简写：background:color url repeat (attachment) position
8.渐变（渐变指多种颜色，平缓变化的一种显示效果）
线性渐变：
background-image : linear-gradient(angle,color-point1,color-point2,....)
angle（到终点）: to top,buttom,left,right 还可以0deg(下到上)90deg(左到右)180deg(上到下)270deg(右到左)
color-point：以PX为单位的数字或% 合法的颜色值+位置 如（#fff 0%,#f0f 100%）
background-image:repeating-linear-gradient(angle,color-point1,color-point2,..)（重复的线性渐变）
径向渐变：
backgrond-image:repeating-radial-gradient(半经 at 圆心x 圆心y,color-point....)
半径： 如50px
圆心：容器的位置 如 center center
9.css hack(编写兼容低版本浏览器代码这个行为，叫css hack)
需添加浏览器前缀
-webkit- 谷歌
-moz- 火狐
当有前缀时 写方向时不用写 to 此时定义的方向时起点
三.表格（table）
如不指定它 默认将时tbody 选择子代选择器时需加上tbody 如：.tb>tbody>tr:nth-child(x)
1.边框合并 border-collapse collapse合并 默认是不合并
2.边框边距 border-spacing 一个值时 同时设置水平和垂直边距 两个值 第一个水平 第二个垂直
3.标题位置caption-side top buttom
4.表格显示规则 默认auto 自动适应内容（加载速度慢） fixed 会溢出（加载速度快）
四.列表
1.list-style-type 列表项类型 none无
2.list-style-image url() 设置列表项为图片
3.list-style-position 列表项位置 默认outside inside（会写入文本中）
4.简写：list-style: type image position