总结 最近遇到的一些坑

此文章用于总结最近遇到的一些坑，以供日后复习。已经好久没有写简书了，因为忙着期末考试，后来又因为一些事耽搁了。言归正传，总结一些坑，有已经解决了的，也有没有解决了，还有一些事概念不够清晰的，归类到CSS，是因为最近踩CSS的坑比较多....

17.7.10

首先说点不是CSS的坑：

1. 并不是所有的浏览器都支持ES6。这个其实早该想到了，只是一直没遇到问题，因为都是用的谷歌浏览器。解决方式是用babel。
2. setTimeout()的问题，这个问题不是我自己遇到的坑，是群里一个大神提出的，觉得特别有意思，就总结一下，万一以后遇到了，也不会太囧。具体如下：
   首先，我们知道 setTimeout()有一个很“常规”的用法，那就是把定时器的时间设置成0。其作用，用一句话概括就是把同步执行的代码变为异步，定时器里面的代码会放在普通流结束后立刻执行，这是前提。
   下面，大神提出一个问题，setTimeout()把时间设置成0,1,2.....20有什么区别。
   好吧，我当时的回答是，普通流执行完毕后会依次执行0,1,2...20。
   当然，答案并没有我想的这么简单。
   不同浏览器对setTimeout()的实现并不相同。
   有些浏览器规定最短时间不能小于4ms，如果小于4ms，当4ms算...
   所以只能说在谷歌浏览器里，是每隔1ms依次执行0,1,2...20。

下面就是CSS的坑：

1. 关于flex的，首先说明一下，这个问题是因为我自己对概念了解得不够细致。我们知道，如果申明了display:flex，那么float,clear,text-align，等等属性就用不了了这里的重点不是探讨哪些属性失效的问题。主要是float，之前，我把float和position画上了等号。以为两者表达的是一个意思，所以，认为申明了display:flex之后position属性也会无效。当然，错得相当离谱....下面，重点分析一下float与position。
   关于position已经写过一篇了，所以重点分析一下float。
   首先，说一下，float的历史，知道它被创造出来到底是做什么的...它一开始的作用只是解决文字环绕问题，就像word上，一段文字，中间加一张图，文字会包裹住那张图，一开始float就是解决这个问题的。后来，人们惊奇的发现，可以用float来进行布局，排版，而且挺方便的，就一直沿用至今。所以，就很清楚的明白，float的一些特性了：
   比如，当一个盒子是float，并且这个盒子周围有text的话，这个盒子脱离文档流，但是并没有完全脱离文档流，也就是说，它会占有之前的位置，用这种方式来让文字环绕它。
   当一个盒子是float，周围全是普通流，并且普通流没有text的话，那么，普通流会穿过它，也就是它不会占有位置。
   当一个盒子是float，周围也是float的盒子的话，他们相互间还是会保留位置。
   说得很玄乎，很绕口。下面说一下自己的理解，其实上面也是自己的理解，可能理解是错的，毕竟没真的落实求证。
   我把这种流，分为3种，分别以固态，液态，气态来形容。
   普通流，就是固态，彼此之间，紧密堆叠，相互之间有影响。
   float,text就是液态，液态与液态之间，彼此影响，但是对于固态，却没有影响。
   position:absolute就是气态，对什么都没有影响，包括气态本身。
   所以，就会看到，申明了position:absolute元素可以无限堆叠。而申明了float的元素彼此之间却有影响。虽然用官方的话来说，它们都脱离了文档流，但是事实表示的效果却不太一样。
   关于float与position，还有一种理解，是float更加倾向于布局，而position是定位，单独对一个盒子或者说页面的一小部分，进行定位，而不是布局，一个是宏观操作，一个是精细处理。
2. 这个坑同样是来自于flex，貌似，在谷歌浏览器上，如果一个元素被申明了display:flex，那么它的伪类元素，比如before,after，都会受其影响，而其他浏览器，比如火狐，在同样的情况下，它的伪类元素却不受影响。当然，这只是我的初步判断。

17.7.13

1.关于火狐和谷歌的兼容问题，还是position:absolute，如果使用position:absolute加margin的组合，如果是display:block的元素，不会有问题，但是如果是内联或者inline-block的元素，2个浏览器的绘制会不一样，比如如果是<a>,<img>就会出问题。
解决的方法有2种，第一种是老老实实的使用position:absolute+top:+position:relative的组合。
第二种就是给该元素加上display:block。

17.8.4

1.ios和安卓，微信浏览器，后退键的机制是不一样的，ios会保留以前的信息，（貌似JS的信息不会保留），但是不会触发onload事件，而安卓简单粗暴，触发onload事件。
2.在安卓里，input标签被选中时，会弹出虚拟输入框，当时页面布局被挤压变形，如果用的是flex布局，当虚拟输入框关闭的时候，可能回不去了，就像物理中的弹性形变变成非弹性形变一样，弹不回去的感觉。。我的解决方案是，给他们加上

{
    flex-shrink: 0;
    flex-grow: 0;
}

不让他们变大或者变小。就不会出现非弹性形变。

17.8.17

这个问题不算BUG吧，当初设计原稿没有考虑微信浏览器顶部的黑条。所以长宽比例就不是很对，但是又要求一屏放下，我改了部分比例，勉强可以一屏放下了，以为差不多了。结果，杀出了华为手机（底部有虚拟键，长宽比例更加爆炸的那种），哎，确实这比例，怎么改都没办法一屏了，最后经过协商，决定长宽比例太过分的，让其中一部分滚动，放弃一屏。无奈，以后遇到这种问题，一定和设计师说好，要考虑微信顶部的黑条和部分手机的底部虚拟键呀0.0