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都能识别。
