vertical-align 控制行內(nèi)塊的對齊方式 寫在行內(nèi)塊元素身上 控制行內(nèi)塊元素和文字的對齊方式的基線
baseline 圖片的基線和文字的基線保持對齊
top 圖片的頂線和文字的頂線（行高的頂線）對齊
bottom 圖片的底線和文字的底線（行高的底線）對齊
middle 圖片的中線和文字的中線對齊
可以解決圖片與文字排列時候底下留白的問題
（不要讓圖片以基線對齊即可 或者將圖片轉(zhuǎn)成塊元素）
可以解決表單元素與文字排列不對齊的問題
（設(shè)置圖片的vertical-align：middle || top || bottom）
可以設(shè)置圖片（行內(nèi)塊）垂直居中
可以設(shè)置多行文字居中顯示
如何讓一個行內(nèi)塊在一個盒子里面水平垂直居中：
1、給父級元素設(shè)置text-align：center? （水平居中）
2、給父元素設(shè)置一個等高的行高
3、給行內(nèi)塊元素設(shè)置vertical-align：middle；（讓圖片以文字的中線對齊）
彈性盒子水平垂直居中? ? 首先把div設(shè)置成彈性盒子 就是? flex
? {display: flex;
? ? justify-content: center;
? ? align-items: center;}
如何設(shè)置多行文本水平垂直居中
1、給多行文字包裹一個盒子 給這個盒子設(shè)置成行內(nèi)塊
2、給父級元素添加行高，并且給行內(nèi)塊元素設(shè)置成vertical-align:middle;即可
3、給行內(nèi)塊添加行高? 讓其覆蓋掉繼承過來的行高
.溢出文字以省略號的形式顯示（單行）
.text-cut
{overflow: hidden;
white-space: nowrap;? ? /*強(qiáng)制不換行*/
text-overflow:ellipsis;}
精靈圖
因為瀏覽器會去服務(wù)器請求頁面，請求回來的頁面在執(zhí)行的過程里面，會不斷的去
服務(wù)器請求對應(yīng)的圖片，當(dāng)頁面上的小圖片過多了，那么瀏覽器會頻繁的去服務(wù)器
發(fā)請求，這個會給服務(wù)器帶來很大的壓力，同時效率很慢。解決方式就是將小圖片
整合到一張大圖上，直接請求大圖片即可，需要使用到某一張小圖的時候只需要獲
取這個小圖在這張大圖的位置即可
1.將需要顯示的區(qū)域用切片選中，直接將切片的寬高賦值給盒子
2.直接獲取切片的坐標(biāo)，直接將坐標(biāo)取負(fù)值賦值給background-position
字體圖標(biāo)
概念：將圖標(biāo)做成字體來是使用
作用：字體相對圖片來說容量更小，同時更加利于維護(hù)和修改
使用：借助于第三方網(wǎng)站（iconfont.cn）找到對應(yīng)的圖標(biāo)。下載下來，按照DEMO提示即可 （一定要注意文件的路徑）
3. 操作標(biāo)簽的自定義屬性
? 獲取 getAttribute('屬性名')
? 設(shè)置 setAttribute('屬性名', '屬性值')
? 移除 removeAttribute('屬性名')
隨機(jī)著色
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? 添加分割符.
? ? ? ? // 將數(shù)組 里面的元素加一個字符串? 并且返回字符串.
? ? ? ? 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);
? ? ? ? // ， 默認(rèn)添加
? ? ? ? var str3 = arr.join();
? ? ? ? console.log(str3);
? // 冒泡的最簡單方法
? ? ? ? arr.sort(function (a,b) {
? ? ? ? ? ? return a - b ; 正序
? ? ? ? ? ? return a - b ; 倒序
? ? ? ? })
? ? ? ? console.log(arr);
