字數903
閱讀197
喜歡16
雖然說標題是說我們遇到的坑，其實是像我這樣的前端菜鳥只掌握了某些知識點的表面，沒有去深究裡面的東西所導致的坑。這週我在做移動頁面的時候就遇到了很多這樣的情況，比如float,opacity,z-index等等，下面我就簡單歸納一下，避免下次再錯。閒話少說，直接上**！
浮動雖然看起來很簡單，但是稍微不注意就會用錯，而且如果不知道原理的話很難找到原因，例如：五個li元素浮動，我們要的效果應該是這樣
可是現實問題確實這樣：紫色的li調到下面去了。
也許大部分人就像我一樣只記得浮動會讓父元素塌陷，無法撐開高度這個特性，可是我們卻忘了還有乙個重要的特性：
因此，藍色的li觸碰到了蛋白質那個li，導致它被卡在那裡，紫色自然被移到下一行
解決辦法，固定寬度
解決辦法是使用rgba來做透明度，它將不會影響其子元素（完美）！
我們知道移動端的畫素轉換非常複雜難算，以前大多數人都會使用**查詢來適配不同的裝置螢幕寬，然後使用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，因為這樣方便計算。
paste_image.png
上圖**顯示用絕對定位，top,left50%，然後負margin寬高的一半，light-height為元素的高就能實現垂直居中。相信大家都知道，但是有個問題，如果元素的寬高變了，那我們也要手動的去改margin。這裡有乙個更方便的辦法，如果不考慮ie低版本的瀏覽器的情況下，可以用translate來實現，這樣無論元素怎麼變，都不會有影響。
paste_image.png
還有一種方案可選，設定display：table-cell; vertical-align:middle;大家可以去查查這個屬性的用法
css 設定透明度
要設定某一元素的背景為透明，在 chrome firefox opera 下是這樣的 css background color rgba 0,0,0,0.4 rgba 中的最後乙個引數 0.4 就是想要的透明度，範圍在0 1之間。在 ie 中一般是這樣的 css background color r...
CSS 透明度屬性
firefox3.5已不支援私有屬性 moz opacity了，在mozilla 1.7 firefox 0.9 之前ff都是使用這個私有屬性的，firefox 0.9 firefox3同時支援 moz opacity和opacity這兩個屬性，firefox公升級到3.5之後，一些 原來有的透明沒...
CSS 透明度清除繼承
今晚在寫自己乙個網頁遊戲的時候，遇到乙個問題，就是css透明度的繼承問題，我先解析下我的問題。假如father設定了透明度，那麼child也會繼承他的透明度，即使你修改child裡面的透明度也不會生效，一位師姐叫我嘗試下把透明度調到1以上，但我查了下，透明度是0到100，ie下是0到1之間，所以是行...