雖然說標題是說我們遇到的坑，其實是像我這樣的前端菜鳥只掌握了某些知識點的表面，沒有去深究里面的東西所導致的坑。這周我在做移動頁面的時候就遇到了很多這樣的情況，比如float,opacity,z-index等等，下面我就簡單歸納一下，避免下次再錯。閑話少說，直接上代碼！

一、float需要注意浮動元素的高度不一樣的問題

浮動雖然看起來很簡單，但是稍微不注意就會用錯，而且如果不知道原理的話很難找到原因，例如：五個li元素浮動，我們要的效果應該是這樣

Paste_Image.png

Paste_Image.png

可是現實問題確實這樣：紫色的li調到下面去了。

Paste_Image.png

也許大部分人就像我一樣只記得浮動會讓父元素塌陷，無法撐開高度這個特性，可是我們卻忘了還有一個重要的特性：

Paste_Image.png

因此，藍色的li觸碰到了蛋白質那個li，導致它被卡在那里，紫色自然被移到下一行

Paste_Image.png

解決辦法，固定高度

Paste_Image.png

二、透明度

比如一個塊級元素你使用了opacity來做透明度的話，它會使子元素跟著也透明，即使子元素設置不透明。同樣的，上代碼

Paste_Image.png

Paste_Image.png

解決辦法是使用rgba來做透明度，它將不會影響其子元素(完美)！

Paste_Image.png

Paste_Image.png

三、動態rem適配移動端

我們知道移動端的像素轉換非常復雜難算，以前大多數人都會使用媒體查詢來適配不同的設備屏幕寬，然后使用em做單位，這樣的不足之處是你需要寫很多媒體查詢，很繁瑣，而且em根據的是父元素的font-size。而rem是相對于根元素來配備，能方便很多。PS：忘掉font-size吧，一切以屏幕的寬度為基準，我保證你會非常爽！

Paste_Image.png

width/10是為了保證10rem占寬滿屏，不除的話，1rem就等于屏幕寬度了。然后我們只需要動態加上上面的js代碼，就不需要做各種媒體查詢就能適配各種設備寬度。

Paste_Image.png

Paste_Image.png

接下來就是通過視覺稿里量到的尺寸來適配rem,比如設計稿的屏幕寬是1000px 元素寬為500px，你只需要10/1000*500就能得到多少rem了，是不是很easy。這里需要說明一下10是10rem，因為這樣方便計算。

動態rem還有一個好處是完美實現1像素邊框，我這里就不再描述了，大家可以去谷歌一下

四、塊級元素垂直居中問題

塊級元素垂直居然有很多方法，我簡單說兩個:

Paste_Image.png

上圖代碼顯示用絕對定位，top,left50%，然后負margin寬高的一半，light-height為元素的高就能實現垂直居中。相信大家都知道，但是有個問題，如果元素的寬高變了，那我們也要手動的去改margin。這里有一個更方便的辦法，如果不考慮IE低版本的瀏覽器的情況下，可以用translate來實現，這樣無論元素怎么變，都不會有影響。

Paste_Image.png

還有一種方案可選，設置display：table-cell; vertical-align:middle;大家可以去查查這個屬性的用法

總結

以上是生活随笔為你收集整理的html float菜鸟,这些年，我们前端菜鸟遇到的坑(1)--CSS易错点--float、透明度、rem......的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。