CSS易错点--float、透明度、rem...

CSS易错点--float、透明度、rem...

字数903  阅读197  评论4  喜欢16

虽然说标题是说我们遇到的坑，其实是像我这样的前端菜鸟只掌握了某些知识点的表面，没有去深究里面的东西所导致的坑。这周我在做移动页面的时候就遇到了很多这样的情况，比如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;大家可以去查查这个属性的用法