此文章用于總結(jié)最近遇到的一些坑，以供日后復(fù)習(xí)。已經(jīng)好久沒有寫簡書了，因?yàn)槊χ谀┛荚嚕髞碛忠驗(yàn)橐恍┦碌R了。言歸正傳，總結(jié)一些坑，有已經(jīng)解決了的，也有沒有解決了，還有一些事概念不夠清晰的，歸類到CSS，是因?yàn)樽罱菴SS的坑比較多....
17.7.10
首先說點(diǎn)不是CSS的坑：
- 并不是所有的瀏覽器都支持ES6。這個(gè)其實(shí)早該想到了，只是一直沒遇到問題，因?yàn)槎际怯玫墓雀铻g覽器。解決方式是用
babel。 -
setTimeout()的問題，這個(gè)問題不是我自己遇到的坑，是群里一個(gè)大神提出的，覺得特別有意思，就總結(jié)一下，萬一以后遇到了，也不會(huì)太囧。具體如下：
首先，我們知道setTimeout()有一個(gè)很“常規(guī)”的用法，那就是把定時(shí)器的時(shí)間設(shè)置成0。其作用，用一句話概括就是把同步執(zhí)行的代碼變?yōu)楫惒?，定時(shí)器里面的代碼會(huì)放在普通流結(jié)束后立刻執(zhí)行，這是前提。
下面，大神提出一個(gè)問題，setTimeout()把時(shí)間設(shè)置成0,1,2.....20有什么區(qū)別。
好吧，我當(dāng)時(shí)的回答是，普通流執(zhí)行完畢后會(huì)依次執(zhí)行0,1,2...20。
當(dāng)然，答案并沒有我想的這么簡單。
不同瀏覽器對(duì)setTimeout()的實(shí)現(xiàn)并不相同。
有些瀏覽器規(guī)定最短時(shí)間不能小于4ms，如果小于4ms，當(dāng)4ms算...
所以只能說在谷歌瀏覽器里，是每隔1ms依次執(zhí)行0,1,2...20。
下面就是CSS的坑：
- 關(guān)于
flex的，首先說明一下，這個(gè)問題是因?yàn)槲易约簩?duì)概念了解得不夠細(xì)致。我們知道，如果申明了display:flex，那么float,clear,text-align，等等屬性就用不了了這里的重點(diǎn)不是探討哪些屬性失效的問題。主要是float，之前，我把float和position畫上了等號(hào)。以為兩者表達(dá)的是一個(gè)意思，所以，認(rèn)為申明了display:flex之后position屬性也會(huì)無效。當(dāng)然，錯(cuò)得相當(dāng)離譜....下面，重點(diǎn)分析一下float與position。
關(guān)于position已經(jīng)寫過一篇了，所以重點(diǎn)分析一下float。
首先，說一下，float的歷史，知道它被創(chuàng)造出來到底是做什么的...它一開始的作用只是解決文字環(huán)繞問題，就像word上，一段文字，中間加一張圖，文字會(huì)包裹住那張圖，一開始float就是解決這個(gè)問題的。后來，人們驚奇的發(fā)現(xiàn)，可以用float來進(jìn)行布局，排版，而且挺方便的，就一直沿用至今。所以，就很清楚的明白，float的一些特性了：
比如，當(dāng)一個(gè)盒子是float，并且這個(gè)盒子周圍有text的話，這個(gè)盒子脫離文檔流，但是并沒有完全脫離文檔流，也就是說，它會(huì)占有之前的位置，用這種方式來讓文字環(huán)繞它。
當(dāng)一個(gè)盒子是float，周圍全是普通流，并且普通流沒有text的話，那么，普通流會(huì)穿過它，也就是它不會(huì)占有位置。
當(dāng)一個(gè)盒子是float，周圍也是float的盒子的話，他們相互間還是會(huì)保留位置。
說得很玄乎，很繞口。下面說一下自己的理解，其實(shí)上面也是自己的理解，可能理解是錯(cuò)的，畢竟沒真的落實(shí)求證。
我把這種流，分為3種，分別以固態(tài)，液態(tài)，氣態(tài)來形容。
普通流，就是固態(tài)，彼此之間，緊密堆疊，相互之間有影響。
float,text就是液態(tài)，液態(tài)與液態(tài)之間，彼此影響，但是對(duì)于固態(tài)，卻沒有影響。
position:absolute就是氣態(tài)，對(duì)什么都沒有影響，包括氣態(tài)本身。
所以，就會(huì)看到，申明了position:absolute元素可以無限堆疊。而申明了float的元素彼此之間卻有影響。雖然用官方的話來說，它們都脫離了文檔流，但是事實(shí)表示的效果卻不太一樣。
關(guān)于float與position，還有一種理解，是float更加傾向于布局，而position是定位，單獨(dú)對(duì)一個(gè)盒子或者說頁面的一小部分，進(jìn)行定位，而不是布局，一個(gè)是宏觀操作，一個(gè)是精細(xì)處理。 - 這個(gè)坑同樣是來自于
flex，貌似，在谷歌瀏覽器上，如果一個(gè)元素被申明了display:flex，那么它的偽類元素，比如before,after，都會(huì)受其影響，而其他瀏覽器，比如火狐，在同樣的情況下，它的偽類元素卻不受影響。當(dāng)然，這只是我的初步判斷。
17.7.13
1.關(guān)于火狐和谷歌的兼容問題，還是position:absolute，如果使用position:absolute加margin的組合，如果是display:block的元素，不會(huì)有問題，但是如果是內(nèi)聯(lián)或者inline-block的元素，2個(gè)瀏覽器的繪制會(huì)不一樣，比如如果是<a>,<img>就會(huì)出問題。
解決的方法有2種，第一種是老老實(shí)實(shí)的使用position:absolute+top:+position:relative的組合。
第二種就是給該元素加上display:block。
17.8.4
1.ios和安卓，微信瀏覽器，后退鍵的機(jī)制是不一樣的，ios會(huì)保留以前的信息，（貌似JS的信息不會(huì)保留），但是不會(huì)觸發(fā)onload事件，而安卓簡單粗暴，觸發(fā)onload事件。
2.在安卓里，input標(biāo)簽被選中時(shí)，會(huì)彈出虛擬輸入框，當(dāng)時(shí)頁面布局被擠壓變形，如果用的是flex布局，當(dāng)虛擬輸入框關(guān)閉的時(shí)候，可能回不去了，就像物理中的彈性形變變成非彈性形變一樣，彈不回去的感覺。。我的解決方案是，給他們加上
{
flex-shrink: 0;
flex-grow: 0;
}
不讓他們變大或者變小。就不會(huì)出現(xiàn)非彈性形變。
17.8.17
這個(gè)問題不算BUG吧，當(dāng)初設(shè)計(jì)原稿沒有考慮微信瀏覽器頂部的黑條。所以長寬比例就不是很對(duì)，但是又要求一屏放下，我改了部分比例，勉強(qiáng)可以一屏放下了，以為差不多了。結(jié)果，殺出了華為手機(jī)（底部有虛擬鍵，長寬比例更加爆炸的那種），哎，確實(shí)這比例，怎么改都沒辦法一屏了，最后經(jīng)過協(xié)商，決定長寬比例太過分的，讓其中一部分滾動(dòng)，放棄一屏。無奈，以后遇到這種問題，一定和設(shè)計(jì)師說好，要考慮微信頂部的黑條和部分手機(jī)的底部虛擬鍵呀0.0
