前端开发常见问题精选（一）

一、如何在元素自身及其父级宽高不确定的情况下让元素水平和垂直方向上居中？

这个问题最常见的就是让文字在浏览器窗口中水平和垂直方向居中了，因为文字的宽度和高度均不确定，浏览器窗口的宽高我们也不知道，那这个问题该如何解决呢？

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;}

其实，关于CSS中的居中方法在我之前的纯CSS七大居中方法这篇文章中已经列举出来了，只不过符合问题中不定宽高条件的只有以上三种方法。

二、Date()对象时间参数格式问题

这个问题说大不大，说小也不小，怕就怕遇到问题时纠结半天都找不到根结所在。举个例子吧~~

var date = new Date("2017-08-04 08:00");
document.write(date);

这段代码在页面上的输出结果是什么？
正常来说应该输出的是标准时间格式： Fri Aug 04 2017 08:00:00 GMT+0800
然而，经过本人测试发现，IE下全军覆没，IE8及其以下浏览器输出NaN，IE8以上浏览器输出Invalid Date ，IOS系统下的所有浏览器也均输出Invalid Date。

那此类问题该如何解决呢？
很简单，将时间参数改为 2017/08/04 08:00 这样的格式就好啦！

三、IOS系统中动态生成的html元素绑定点击事件失效问题如何解决？

我们先来谈谈如何给动态生成的html元素绑定点击事件。
在jquery早期版本中我们可以使用bind()来实现，然而后面建议我们改用on()来实现同样效果，具体用法如下：

$(document).on(‘click’,’需要绑定事件的元素’,function(){});

例如：

$(document).on('click','#btn',function(){
    alert('你点击了这个按钮！');
});
$('body').prepend('<div id="btn">按钮</div>');

以上方法其实就已经解决了绑定点击事件问题，但是在IOS系统下我们需要注意一个问题，那就是在非a标签的元素中可能仍然会存在点击事件失效的问题，这时的解决方案就是给该元素的CSS中加上cursor: pointer这个属性。

四、IOS系统中overflow: auto滑动不流畅如何解决？

又来一个IOS下的坑！ 我们制作手机H5的时候，有时候可能需要模拟页面默认的滚动条，这时我们可以使用overflow: auto就很轻松的解决了这个问题，但是却发现在IOS系统中添加了overflow: auto的元素并不能像默认长页面滑动那么流畅，我们手指停止滑动时，页面并不会随着惯性继续滚动一段距离，而是直接停止。其实该问题解决也很简单，直接在该元素上继续添加一个CSS属性-webkit-overflow-scrolling : touch就好。

五、如何使用纯CSS实现单行和多行文本溢出省略？

1、单行文本溢出省略

.ellipsis{ overflow:hidden; white-space: nowrap; text-overflow:ellipsis;}

2、多行文本溢出省略

/*-webkit-line-clamp属性是用来限制行数的，本例是限制两行*/
.mul-ellipsis{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}

看到-webkit-前缀，你就应该知道该方法只适用于移动端，PC端若要实现同样效果的话，额。。貌似只有在后端限制文字字数效果更好了吧。

六、如何解决元素高度从0变为auto时过渡效果无效的问题？

我们可以使用CSS3中的transition属性来实现过渡效果，但是只能对数值有效而对于像auto这样的属性值是无效的，所以若想要实现元素高度从0逐渐变化为auto的效果，可以使用max-height属性来替代height。

以上是我在工作当中所遇到的一些问题总结，在此与大家共勉！