工作中总结的一些常见的前端问题解决计划，继续总结与记录，下班能力更欢快地摸鱼(划掉)
CSS篇
0. 文本主动换行bug
假如一个宽度固定的div内有一段文字，那么浏览器默认解决形式会比拟傻，纯中文下乍一看没问题，但英文与数字混搭等状况容易呈现bug，此时解决办法有两种css办法：
word-wrap: break-word; // 对过长单词会先另起一行word-break: break-all; // 粗犷地拆掉单词并换行，比拟罕用1. css实现iPhone系列黑边适配
以往的iPhone X 适配比较简单粗犷，通常是正则判断机型来做出相应解决，现在须要适配的iPhone机型早已不止X系列，好在css有对应的解决计划，十分实用，那就是 viweport-fit 属性：
须要设置页面内容齐全笼罩整个窗口：
<meta name="viewport" content="width=device-width, viewport-fit=cover">只有设置了 viewport-fit=cover，env()才失效，依据状况来应用：
padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);也能够应用计算属性：
calc(55px + constant(safe-area-inset-bottom))2. 文本超出省略
display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3; /** 最大行数 **/overflow: hidden;4. ios滑动不晦涩
overflow: auto;-webkit-overflow-scrolling: touch;5. 暗藏div滚动条
div::-webkit-scrollbar { display: none;}6. 程度垂直居中
相对定位，须要申明宽高
div { width: 100px; height: 100px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;}flex，父级管制，比拟罕用
.parent { display: flex; justify-content: center; align-items: center;}grid，父级管制，更简洁
.parent { display: grid; place-items: center;}7. div可编辑
富文本编辑器原理
<div contenteditable="true"></div>8. cslc
我的项目中罕用css预编译，css计算表达式个别很少用到，且可能存在性能问题。然而须要的时候应用还是挺不便的，比方下面iphone黑条的适配。
div { width: calc(10rem - 20px + 5%);}JS篇
0. ios audio 无奈自动播放、循环播放的问题
var music = document.getElementById('video');var state = false;document.addEventListener('touchstart', function(){ if(state == false){ music.play(); state = true; }}, false);// 微信浏览器document.addEventListener("WeixinJSBridgeReady", function () { music.play();}, false);//循环播放music.onended = function () { music.load(); music.play();}1. 在ios中日期格局显示不能为"-"，否则会呈现谬误。
const date = '2019-01-01'const newDate = new Date(date.replace(/-/g, '/'))此问题只呈现在ios，安卓和PC都能辨认。