20200814 王维

学习总结：
1.字体属性
font-weight lighter 字体变细 无单位的数字400正常 700加粗
font-style:italic字体倾斜
font-variant 小型大写字母
font 必须写size和family否则不生效 font-size/line-height
2.文本属性
text-align:justify两端对齐
text-align:center使得元素的内容居中，但不会使块级元素居中对齐，margin:auto使元素本身居
中对齐
line-height属性取值为无单位的数字为字号的倍数
text-decoration取值underline下划线、overline上划线、line-through删除线
outline轮廓 边框边缘的外围
3.背景
background-size cover填充 contain包含 auto默认值，真实大小
background-attachment fixed窗口改变时，图片位置不变 scroll默认值
background:color url() repeat attachment position背景简写
background-position用法 精灵图sprite，项目中为了减少响应次数，一般很多小图片都会拼到
一张大图中，然后使用背景图的background-position，去显示具体想要的小图标，这种很多小
图标拼出的大图，称之为精灵图，雪碧图
背景渐变使用background-image设置
线性渐变 linear-gradient(angle,color 出现的距离起点的位置,color 出现的距离起点位置，...)
angle为指针指向上方为基准旋转的角度，沿指针方向按给定的颜色取值渐变，
可以取值关键字 to top 0deg 从下到上;to right 从左到右 90deg；to bottom 180deg 从上到下;
to left 270deg 从右到左
径向渐变 radial-gradient(半径 at 圆心位置(left top)，color 出现的距离圆心的位置，...)
重复渐变 repeating-linear-gradient线性 repeating-redial-gradient径向
兼容性问题 css hack 添加浏览器内核前缀 -ms- IE浏览器；-o- Opera；-moz FIrefox；-webkit-
Chrome/Safari 存在前缀时，不写to，方向为起点
4.表格
td/th设置外边距无效 vertical-align设置单元格数据的垂直对齐方式 middle垂直居中对齐
boder-collapse:collapse边框合并
boder-spacing 边框边距
table-layout表格显示规则 auto默认值 自适应内容，表格复杂时加载较慢，比较灵活；fixed 固定
表格内容，加载快，不灵活
5.列表
list-style-image设置列表项为图片
心得体会：
很多css样式看起来很简单，但其中的每一个属性要想准确理解很难，需要多查资料，多试验，如渐
变色，颜色后面跟的值是这个颜色的位置，这个位置是以到距离起点的距离表示的，我开始理解为
颜色原样显示的长度，后面经过试验，在浏览器中进行微调，大概理解了他的含义，以小见大，一
个css样式或者一个html标签，看上去他的定义可能很简单，但想要准确理解，还是要多下功夫。