雖然說標(biāo)題是說我們遇到的坑哮塞，其實(shí)是像我這樣的前端菜鳥只掌握了某些知識(shí)點(diǎn)的表面刨秆，沒有去深究里面的東西所導(dǎo)致的坑。這周我在做移動(dòng)頁面的時(shí)候就遇到了很多這樣的情況忆畅，比如float,opacity,z-index等等衡未，下面我就簡(jiǎn)單歸納一下，避免下次再錯(cuò)家凯。閑話少說缓醋，直接上代碼！
一肆饶、float需要注意浮動(dòng)元素的高度不一樣的問題
浮動(dòng)雖然看起來很簡(jiǎn)單改衩，但是稍微不注意就會(huì)用錯(cuò)，而且如果不知道原理的話很難找到原因驯镊，例如：五個(gè)li元素浮動(dòng)葫督，我們要的效果應(yīng)該是這樣
可是現(xiàn)實(shí)問題確實(shí)這樣：紫色的li調(diào)到下面去了。
也許大部分人就像我一樣只記得浮動(dòng)會(huì)讓父元素塌陷板惑，無法撐開高度這個(gè)特性橄镜，可是我們卻忘了還有一個(gè)重要的特性：
因此，藍(lán)色的li觸碰到了蛋白質(zhì)那個(gè)li冯乘，導(dǎo)致它被卡在那里洽胶，紫色自然被移到下一行
解決辦法，固定高度
二裆馒、透明度
- 比如一個(gè)塊級(jí)元素你使用了opacity來做透明度的話姊氓，它會(huì)使子元素跟著也透明，即使子元素設(shè)置不透明喷好。同樣的翔横，上代碼
解決辦法是使用rgba來做透明度，它將不會(huì)影響其子元素（完美）梗搅！
三禾唁、動(dòng)態(tài)rem適配移動(dòng)端
我們知道移動(dòng)端的像素轉(zhuǎn)換非常復(fù)雜難算效览，以前大多數(shù)人都會(huì)使用媒體查詢來適配不同的設(shè)備屏幕寬，然后使用em做單位荡短，這樣的不足之處是你需要寫很多媒體查詢丐枉，很繁瑣，而且em根據(jù)的是父元素的font-size掘托。而rem是相對(duì)于根元素來配備瘦锹，能方便很多。PS：忘掉font-size吧闪盔，一切以屏幕的寬度為基準(zhǔn)沼本，我保證你會(huì)非常爽！
width/10是為了保證10rem占寬滿屏锭沟，不除的話，1rem就等于屏幕寬度了识补。然后我們只需要?jiǎng)討B(tài)加上上面的js代碼族淮，就不需要做各種媒體查詢就能適配各種設(shè)備寬度。
接下來就是通過視覺稿里量到的尺寸來適配rem,比如設(shè)計(jì)稿的屏幕寬是1000px 元素寬為500px凭涂，你只需要10/1000*500就能得到多少rem了祝辣，是不是很easy。這里需要說明一下10是10rem切油，因?yàn)檫@樣方便計(jì)算蝙斜。
- 動(dòng)態(tài)rem還有一個(gè)好處是完美實(shí)現(xiàn)1像素邊框，我這里就不再描述了澎胡，大家可以去谷歌一下
四孕荠、塊級(jí)元素垂直居中問題
塊級(jí)元素垂直居然有很多方法，我簡(jiǎn)單說兩個(gè):
上圖代碼顯示用絕對(duì)定位攻谁，top,left50%稚伍，然后負(fù)margin寬高的一半，light-height為元素的高就能實(shí)現(xiàn)垂直居中戚宦。相信大家都知道个曙，但是有個(gè)問題，如果元素的寬高變了受楼，那我們也要手動(dòng)的去改margin垦搬。這里有一個(gè)更方便的辦法，如果不考慮IE低版本的瀏覽器的情況下艳汽，可以用translate來實(shí)現(xiàn)猴贰，這樣無論元素怎么變，都不會(huì)有影響骚灸。
還有一種方案可選糟趾，設(shè)置display：table-cell; vertical-align:middle;大家可以去查查這個(gè)屬性的用法
