前端开发记录

1. 常见问题1：vw、vh、%、em、rem之间的区别：
   1）子元素设置em，大小是取决于父元素的字体大小的
   2）元素的width，height，margin，padding用em的话是取决于该元素的font-size的大小。
   3）em的继承效果，每个元素都自动继承其父元素的字体i大小
   4）只要父级元素及上面一直有font-size为em单位，则会一直继承，但假如自己设置了font-size的单位为px的时候，则会直接使用自己的px值
   5）rem是css3新引进的一个度量单位，rem的长度是相对于根元素，即html的长度，通过是给html设置一个标准值，然后其他元素设置rem都是以html的标准值为1单位来设置，当用rem做响应式时，直接在媒体中改变html的font-size那么用rem作为单位的元素的大小都会相应改变，例如：html的默认font-size为16px。

2. 常见问题2：低版本与高版本决定定位
   设置绝对定位，样式没有覆盖，而是平铺。高版本设置父元素display：flex样式时，可不设置left：0，低版本需设置left：0（不然只会平铺）。当设置脱离文档流的样式时，低版本浏览器需配合设置top、bottom、left、right属性。
3. echarts图标会被压缩为默认宽度100px
   切换tab时，第二个页面表宽和高都是自适应，父组件有tab切换功能，子组件显示echarts图，父组件进行tab切换时，子组件的图标初始化时无法获取宽和高，导致echarts图不能完全显示，只有在窗体大小发生变化时才能完全显示。这是因为切换时页面是display：none的，宽高都无法获取。解决方法：可以在切换到该标签页时需要手动调用resize方法获取正确的宽高并且刷新画布，或者在opts中显示指定图表宽高。
   使用v-show和v-if的区别在于v-show不满足条件的元素会存在在Dom树种，只是display属性改成none；但v-if不满足条件的元素不会存在在dom树中。
4. replace与replaceAll函数匹配正则
   replace的参数是char和charSequence，即可以支持字符的替换，也可以支持字符串的替换。replaceAll的参数是regex，即基于规则表达式的替换，比如：可以通过replaceAll（“\\d”,"*"）把一个字符串所有的数字字符都换成星号。
   相同点：都是全部替换，即把源字符串的某一个字符或字符串全部替换成制定的字符或字符串。不同点：replaceAll支持正则表达式，因此会对参数进行解析（两个参数均是），如replaceAll（“\\d”,"*"），而replace（“\\d”,"*"）就是替换“\\d”的字符串，而不会解析为正则。另外一个不同点“\”在java中是一个转义字符，所以需要用两个代表一个。

5. iOS浏览器在设置overflow: scroll;后滑动不流畅，感觉像是卡顿
   这个目前在Android和PC上没得问题，但是iOS上有问题，解决方法就是加上属性：
   -webkit-overflow-scrolling: touch;

6. background-origin: padding-box|border-box|content-box;
   注：border是浮与背景图片之上的。

   值	描述	测试
   padding-box	背景图像相对于内边距框来定位。	测试
   border-box	背景图像相对于边框盒来定位。	测试
   content-box	背景图像相对于内容框来定位。	测试