一肋坚、如何在元素自身及其父級寬高不確定的情況下讓元素水平和垂直方向上居中泵喘？
這個問題最常見的就是讓文字在瀏覽器窗口中水平和垂直方向居中了拉队，因為文字的寬度和高度均不確定众眨，瀏覽器窗口的寬高我們也不知道握牧，那這個問題該如何解決呢？
1娩梨、50%定位+translate居中法
html,body{ height: 100%;}
.text{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
2沿腰、Flexbox居中法
html,body{ display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;} /*注意這里得寫寬度屬性*/
3、Flexbox+margin居中法
html,body{ display: flex; width: 100%; height: 100%;} /*注意這里得寫寬度屬性*/
.text{ margin: auto;}
其實狈定，關(guān)于CSS中的居中方法在我之前的純CSS七大居中方法這篇文章中已經(jīng)列舉出來了颂龙，只不過符合問題中不定寬高條件的只有以上三種方法。
二纽什、Date()對象時間參數(shù)格式問題
這個問題說大不大措嵌，說小也不小，怕就怕遇到問題時糾結(jié)半天都找不到根結(jié)所在稿湿。舉個例子吧~~
var date = new Date("2017-08-04 08:00");
document.write(date);
這段代碼在頁面上的輸出結(jié)果是什么铅匹？
正常來說應(yīng)該輸出的是標準時間格式： Fri Aug 04 2017 08:00:00 GMT+0800
然而，經(jīng)過本人測試發(fā)現(xiàn)饺藤，IE下全軍覆沒包斑，IE8及其以下瀏覽器輸出NaN，IE8以上瀏覽器輸出Invalid Date 涕俗，IOS系統(tǒng)下的所有瀏覽器也均輸出Invalid Date罗丰。
那此類問題該如何解決呢？
很簡單再姑，將時間參數(shù)改為 2017/08/04 08:00 這樣的格式就好啦萌抵！
三、IOS系統(tǒng)中動態(tài)生成的html元素綁定點擊事件失效問題如何解決元镀？
我們先來談?wù)勅绾谓o動態(tài)生成的html元素綁定點擊事件绍填。
在jquery早期版本中我們可以使用bind()來實現(xiàn)，然而后面建議我們改用on()來實現(xiàn)同樣效果栖疑，具體用法如下：
$(document).on('click','需要綁定事件的元素',function(){});
例如：
$(document).on('click','#btn',function(){
alert('你點擊了這個按鈕讨永！');
});
$('body').prepend('<div id="btn">按鈕</div>');
以上方法其實就已經(jīng)解決了綁定點擊事件問題，但是在IOS系統(tǒng)下我們需要注意一個問題遇革，那就是在非a標簽的元素中可能仍然會存在點擊事件失效的問題卿闹，這時的解決方案就是給該元素的CSS中加上cursor: pointer這個屬性揭糕。
四、IOS系統(tǒng)中overflow: auto滑動不流暢如何解決锻霎？
又來一個IOS下的坑著角！ 我們制作手機H5的時候，有時候可能需要模擬頁面默認的滾動條旋恼，這時我們可以使用overflow: auto就很輕松的解決了這個問題吏口，但是卻發(fā)現(xiàn)在IOS系統(tǒng)中添加了overflow: auto的元素并不能像默認長頁面滑動那么流暢，我們手指停止滑動時蚌铜，頁面并不會隨著慣性繼續(xù)滾動一段距離锨侯，而是直接停止嫩海。其實該問題解決也很簡單冬殃，直接在該元素上繼續(xù)添加一個CSS屬性-webkit-overflow-scrolling : touch就好。
五叁怪、如何使用純CSS實現(xiàn)單行和多行文本溢出省略审葬？
1、單行文本溢出省略
.ellipsis{ overflow:hidden; white-space: nowrap; text-overflow:ellipsis;}
2奕谭、多行文本溢出省略
/*-webkit-line-clamp屬性是用來限制行數(shù)的涣觉，本例是限制兩行*/
.mul-ellipsis{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
看到-webkit-前綴，你就應(yīng)該知道該方法只適用于移動端血柳，PC端若要實現(xiàn)同樣效果的話官册，額。难捌。貌似只有在后端限制文字字數(shù)效果更好了吧膝宁。
六、如何解決元素高度從0變?yōu)閍uto時過渡效果無效的問題根吁？
我們可以使用CSS3中的transition屬性來實現(xiàn)過渡效果员淫，但是只能對數(shù)值有效而對于像auto這樣的屬性值是無效的，所以若想要實現(xiàn)元素高度從0逐漸變化為auto的效果击敌，可以使用max-height屬性來替代height介返。
以上是我在工作當中所遇到的一些問題總結(jié)，在此與大家共勉沃斤！
