一直用到的前端小手势
时间：2023-04-02 14:10:40
HTML
工作中总结的一些常见前端问题解决方法，持续总结记录，让你在工作中更快乐地钓鱼（划掉）CSS第0章文字换行bug假设一个宽度固定的div里面有一段文字，浏览器默认的处理方式会比较笨。纯中文乍一看还可以，但是英文和数字混搭就容易出bug。这时有两种css方法可以解决：word-wrap:break-word;//对于太长的单词，将首先创建一个新行word-break:break-all;//粗略的拆字换行，比较常用X适配比较简单粗暴，一般都是由正则模型判断，做相应的处理。如今，需要适配的iPhone机型并不局限于X系列。好在css有对应的处理方案，很实用，就是viweport-fit属性：需要设置页面内容完全覆盖整个窗口：只有设置viewport-fit=cover时，env()才会生效，视情况而定使用：padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom);也可以使用计算属性：calc(55px+constant(safe-area-insetiosSlidingisnotsmoothoverflow:auto;-webkit-overflow-scrolling:touch;5.Hidedivscrollbardiv::-webkit-scrollbar{display:none;}6.水平垂直居中绝对定位，需要声明宽高div{width:100px;height:100px;position:absolutee;顶部：0；右：0；底部：0；左：0；margin:auto;}flex，父控件，比较常用。父{显示：flex;证明内容：居中；对齐项目：居中；}grid，父级控件，更简洁。父{显示：网格；place-items:center;}7.div可编辑富文本编辑器原理
8.cslc项目常用的css预编译，css计算表达式一般很少用到，可能会出现性能问题，但是在需要的时候用起来很方便，比如上面iphone黑条的适配。div{width:calc(10rem-20px+5%);}JS第0章.ios音频无法自动播放或循环播放的问题varmusic=document.getElementById('video');varstate=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中不能为“-”，否则会报错。constdate='2019-01-01'constnewDate=newDate(date.replace(/-/g,'/'))这个问题只在ios出现，安卓和PC都能识别。
