此文章用于總結(jié)最近遇到的一些坑敞斋，以供日后復(fù)習(xí)截汪。已經(jīng)好久沒(méi)有寫(xiě)簡(jiǎn)書(shū)了，因?yàn)槊χ谀┛荚囍采樱髞?lái)又因?yàn)橐恍┦碌R了衙解。言歸正傳，總結(jié)一些坑焰枢，有已經(jīng)解決了的蚓峦，也有沒(méi)有解決了，還有一些事概念不夠清晰的济锄，歸類(lèi)到CSS枫匾，是因?yàn)樽罱菴SS的坑比較多....
17.7.10
首先說(shuō)點(diǎn)不是CSS的坑：
- 并不是所有的瀏覽器都支持ES6。這個(gè)其實(shí)早該想到了拟淮，只是一直沒(méi)遇到問(wèn)題，因?yàn)槎际怯玫墓雀铻g覽器谴忧。解決方式是用
babel很泊。 -
setTimeout()的問(wèn)題角虫，這個(gè)問(wèn)題不是我自己遇到的坑，是群里一個(gè)大神提出的委造，覺(jué)得特別有意思戳鹅，就總結(jié)一下，萬(wàn)一以后遇到了昏兆，也不會(huì)太囧枫虏。具體如下：
首先，我們知道setTimeout()有一個(gè)很“常規(guī)”的用法爬虱，那就是把定時(shí)器的時(shí)間設(shè)置成0隶债。其作用，用一句話(huà)概括就是把同步執(zhí)行的代碼變?yōu)楫惒脚荏荩〞r(shí)器里面的代碼會(huì)放在普通流結(jié)束后立刻執(zhí)行死讹，這是前提。
下面曲梗，大神提出一個(gè)問(wèn)題赞警，setTimeout()把時(shí)間設(shè)置成0,1,2.....20有什么區(qū)別。
好吧虏两，我當(dāng)時(shí)的回答是愧旦，普通流執(zhí)行完畢后會(huì)依次執(zhí)行0,1,2...20。
當(dāng)然定罢，答案并沒(méi)有我想的這么簡(jiǎn)單笤虫。
不同瀏覽器對(duì)setTimeout()的實(shí)現(xiàn)并不相同。
有些瀏覽器規(guī)定最短時(shí)間不能小于4ms引颈，如果小于4ms耕皮，當(dāng)4ms算...
所以只能說(shuō)在谷歌瀏覽器里，是每隔1ms依次執(zhí)行0,1,2...20蝙场。
下面就是CSS的坑：
- 關(guān)于
flex的凌停，首先說(shuō)明一下，這個(gè)問(wèn)題是因?yàn)槲易约簩?duì)概念了解得不夠細(xì)致售滤。我們知道罚拟，如果申明了display:flex，那么float,clear,text-align完箩，等等屬性就用不了了這里的重點(diǎn)不是探討哪些屬性失效的問(wèn)題赐俗。主要是float，之前弊知，我把float和position畫(huà)上了等號(hào)阻逮。以為兩者表達(dá)的是一個(gè)意思，所以秩彤，認(rèn)為申明了display:flex之后position屬性也會(huì)無(wú)效叔扼。當(dāng)然事哭，錯(cuò)得相當(dāng)離譜....下面，重點(diǎn)分析一下float與position瓜富。
關(guān)于position已經(jīng)寫(xiě)過(guò)一篇了鳍咱，所以重點(diǎn)分析一下float。
首先与柑，說(shuō)一下谤辜，float的歷史，知道它被創(chuàng)造出來(lái)到底是做什么的...它一開(kāi)始的作用只是解決文字環(huán)繞問(wèn)題价捧，就像word上丑念，一段文字，中間加一張圖干旧，文字會(huì)包裹住那張圖渠欺，一開(kāi)始float就是解決這個(gè)問(wèn)題的。后來(lái)椎眯，人們驚奇的發(fā)現(xiàn)挠将，可以用float來(lái)進(jìn)行布局，排版编整，而且挺方便的舔稀，就一直沿用至今。所以掌测，就很清楚的明白内贮，float的一些特性了：
比如，當(dāng)一個(gè)盒子是float汞斧，并且這個(gè)盒子周?chē)?code>text的話(huà)夜郁，這個(gè)盒子脫離文檔流，但是并沒(méi)有完全脫離文檔流粘勒，也就是說(shuō)竞端，它會(huì)占有之前的位置，用這種方式來(lái)讓文字環(huán)繞它庙睡。
當(dāng)一個(gè)盒子是float事富，周?chē)瞧胀鳎⑶移胀鳑](méi)有text的話(huà)乘陪，那么统台，普通流會(huì)穿過(guò)它，也就是它不會(huì)占有位置啡邑。
當(dāng)一個(gè)盒子是float贱勃，周?chē)彩?code>float的盒子的話(huà)，他們相互間還是會(huì)保留位置。
說(shuō)得很玄乎募寨，很繞口族展。下面說(shuō)一下自己的理解，其實(shí)上面也是自己的理解拔鹰，可能理解是錯(cuò)的，畢竟沒(méi)真的落實(shí)求證贵涵。
我把這種流列肢，分為3種，分別以固態(tài)宾茂，液態(tài)瓷马，氣態(tài)來(lái)形容。
普通流跨晴，就是固態(tài)欧聘，彼此之間，緊密堆疊端盆，相互之間有影響怀骤。
float,text就是液態(tài)，液態(tài)與液態(tài)之間焕妙，彼此影響蒋伦，但是對(duì)于固態(tài)，卻沒(méi)有影響焚鹊。
position:absolute就是氣態(tài)痕届，對(duì)什么都沒(méi)有影響，包括氣態(tài)本身末患。
所以研叫，就會(huì)看到，申明了position:absolute元素可以無(wú)限堆疊璧针。而申明了float的元素彼此之間卻有影響嚷炉。雖然用官方的話(huà)來(lái)說(shuō)，它們都脫離了文檔流陈莽，但是事實(shí)表示的效果卻不太一樣渤昌。
關(guān)于float與position，還有一種理解走搁，是float更加傾向于布局独柑，而position是定位，單獨(dú)對(duì)一個(gè)盒子或者說(shuō)頁(yè)面的一小部分私植，進(jìn)行定位忌栅，而不是布局，一個(gè)是宏觀操作，一個(gè)是精細(xì)處理索绪。 - 這個(gè)坑同樣是來(lái)自于
flex湖员，貌似，在谷歌瀏覽器上瑞驱，如果一個(gè)元素被申明了display:flex娘摔，那么它的偽類(lèi)元素，比如before,after唤反，都會(huì)受其影響凳寺，而其他瀏覽器，比如火狐彤侍，在同樣的情況下肠缨，它的偽類(lèi)元素卻不受影響。當(dāng)然盏阶，這只是我的初步判斷晒奕。
17.7.13
1.關(guān)于火狐和谷歌的兼容問(wèn)題，還是position:absolute名斟，如果使用position:absolute加margin的組合脑慧，如果是display:block的元素，不會(huì)有問(wèn)題蒸眠，但是如果是內(nèi)聯(lián)或者inline-block的元素漾橙，2個(gè)瀏覽器的繪制會(huì)不一樣，比如如果是<a>,<img>就會(huì)出問(wèn)題楞卡。
解決的方法有2種霜运，第一種是老老實(shí)實(shí)的使用position:absolute+top:+position:relative的組合。
第二種就是給該元素加上display:block蒋腮。
17.8.4
1.ios和安卓淘捡，微信瀏覽器，后退鍵的機(jī)制是不一樣的池摧，ios會(huì)保留以前的信息焦除，（貌似JS的信息不會(huì)保留），但是不會(huì)觸發(fā)onload事件作彤，而安卓簡(jiǎn)單粗暴膘魄，觸發(fā)onload事件。
2.在安卓里竭讳，input標(biāo)簽被選中時(shí)创葡，會(huì)彈出虛擬輸入框，當(dāng)時(shí)頁(yè)面布局被擠壓變形绢慢，如果用的是flex布局灿渴，當(dāng)虛擬輸入框關(guān)閉的時(shí)候，可能回不去了，就像物理中的彈性形變變成非彈性形變一樣骚露，彈不回去的感覺(jué)蹬挤。。我的解決方案是棘幸，給他們加上
{
flex-shrink: 0;
flex-grow: 0;
}
不讓他們變大或者變小焰扳。就不會(huì)出現(xiàn)非彈性形變。
17.8.17
這個(gè)問(wèn)題不算BUG吧误续，當(dāng)初設(shè)計(jì)原稿沒(méi)有考慮微信瀏覽器頂部的黑條蓝翰。所以長(zhǎng)寬比例就不是很對(duì)，但是又要求一屏放下女嘲，我改了部分比例，勉強(qiáng)可以一屏放下了诞帐，以為差不多了欣尼。結(jié)果，殺出了華為手機(jī)（底部有虛擬鍵停蕉，長(zhǎng)寬比例更加爆炸的那種）愕鼓，哎，確實(shí)這比例慧起，怎么改都沒(méi)辦法一屏了菇晃，最后經(jīng)過(guò)協(xié)商，決定長(zhǎng)寬比例太過(guò)分的蚓挤，讓其中一部分滾動(dòng)磺送，放棄一屏。無(wú)奈灿意，以后遇到這種問(wèn)題估灿，一定和設(shè)計(jì)師說(shuō)好，要考慮微信頂部的黑條和部分手機(jī)的底部虛擬鍵呀0.0
