vertical-align 控制行内块的对齐方式 写在行内块元素身上 控制行内块元素和文字的对齐方式的基线
baseline 图片的基线和文字的基线保持对齐
top 图片的顶线和文字的顶线（行高的顶线）对齐
bottom 图片的底线和文字的底线（行高的底线）对齐
middle 图片的中线和文字的中线对齐
可以解决图片与文字排列时候底下留白的问题
（不要让图片以基线对齐即可 或者将图片转成块元素）
可以解决表单元素与文字排列不对齐的问题
（设置图片的vertical-align：middle || top || bottom）
可以设置图片（行内块）垂直居中
可以设置多行文字居中显示
如何让一个行内块在一个盒子里面水平垂直居中：
1、给父级元素设置text-align：center （水平居中）
2、给父元素设置一个等高的行高
3、给行内块元素设置vertical-align：middle；（让图片以文字的中线对齐）
弹性盒子水平垂直居中 首先把div设置成弹性盒子 就是 flex
{display: flex;
justify-content: center;
align-items: center;}
如何设置多行文本水平垂直居中
1、给多行文字包裹一个盒子 给这个盒子设置成行内块
2、给父级元素添加行高，并且给行内块元素设置成vertical-align:middle;即可
3、给行内块添加行高 让其覆盖掉继承过来的行高
.溢出文字以省略号的形式显示（单行）
.text-cut
{overflow: hidden;
white-space: nowrap; /*强制不换行*/
text-overflow:ellipsis;}
精灵图
因为浏览器会去服务器请求页面，请求回来的页面在执行的过程里面，会不断的去
服务器请求对应的图片，当页面上的小图片过多了，那么浏览器会频繁的去服务器
发请求，这个会给服务器带来很大的压力，同时效率很慢。解决方式就是将小图片
整合到一张大图上，直接请求大图片即可，需要使用到某一张小图的时候只需要获
取这个小图在这张大图的位置即可
1.将需要显示的区域用切片选中，直接将切片的宽高赋值给盒子
2.直接获取切片的坐标，直接将坐标取负值赋值给background-position
字体图标
概念：将图标做成字体来是使用
作用：字体相对图片来说容量更小，同时更加利于维护和修改
使用：借助于第三方网站（iconfont.cn）找到对应的图标。下载下来，按照DEMO提示即可 （一定要注意文件的路径）
3. 操作标签的自定义属性
获取 getAttribute('属性名')
设置 setAttribute('属性名', '属性值')
移除 removeAttribute('属性名')
随机着色
function getClor() {
var red = parseInt(Math.random()*255);
var green= parseInt(Math.random()*255);
var blue = parseInt(Math.random()*255);
return 'rgb('+red +','+ green +','+blue +')';
}
var str = getClor();
console.log(str);
封装时间的格式化
function getTime() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
var hour = date.getHours();
var minute =date.getMinutes();
var second =date.getSeconds();
function addZero(time) {
return time > 10 ? time :'0'+ time;
}
return year +'-'+addZero(month) +'-'+addZero(day) +' ' +addZero(hour) +':'+addZero(minute) + ':' + addZero(second);
}
var res = getTime();
console.log(res);
// 倒计时
var end = +new Date('2019-07-06');
console.log(end);
var now = + new Date();
var time = parseInt((end - now) / 1000);
console.log(time);
var day = parseInt(time / 60 / 60 / 24);
var hour = parseInt(time / 60 / 60) % 24;
console.log(hour);
var minute = parseInt(minute / 60) % 60;
var second = parseInt(time) % 60;
var str = '距离高考还有 ：' + day + '天' + hour + '小时' + second + '秒';
console.log(str);
// join 添加分割符.
// 将数组 里面的元素加一个字符串 并且返回字符串.
var arr = [1, 4, 7, 2, 5, 8];
var str = arr.join('-');
console.log(str);
// 添加空格
var str1 = arr.join(' ');
console.log(str1);
// 把空格去掉
var str2 = arr.join('');
console.log(str2);
// ， 默认添加
var str3 = arr.join();
console.log(str3);
// 冒泡的最简单方法
arr.sort(function (a,b) {
return a - b ; 正序
return a - b ; 倒序
})
console.log(arr);