Web前端学习的技能

CSS是前端三要素之一，通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。对于每一个参加重庆Web前端学习的人来说，CSS是他们必须要掌握的技能之一，不仅要牢记理论知识，还要熟练应用。接下来千锋重庆web前端的小编就给大家分享5个比较有用的CSS实用技巧。Web前端学习之CSS实用技巧

1、文字居中兼容

正常处理文字上下居中的手段是让元素height和line-height相等，但是安卓环境下当字体大小<14px/0.7rem的时候会出现居中失效的情况。

2、图片自适应占位方式

当图片未正确加载，或加载完成前，由于图片高度为0，其容器会因为没有内容，导致容器无法撑高而塌陷，而如果加载较慢则会再图片加载完成后出现闪烁的情况。

CSS中，当padding-top/bottom值为百分比时，其值都是以其父元素的宽度为参照对象。因此对于宽高比例固定的情况，可以利用padding-top/bottom用于图片自适应占位，解决页面闪烁的问题。

如果仅设置值padding-top/bottom为百分比，会出现一个问题，就是该方法容器的max-height属性会失效，就无法限制容器的最大高度了。因此，可以给容器添加一个伪元素的子元素用于撑起内容，该子元素拥有一个padding-top:100%，同时给容器一个max-height尝试限制容器的高度，最后内容用绝对定位的方式添加即可。

3、使用currentColor来简化CSS

设置border-color、background-color等颜色的时候，可以使用currentColor[与当前元素的字体颜色相同]来简化CSS。

4、曲线阴影的实现

多个阴影重叠，就是正常阴影+曲线阴影。

正常情况下，有个矩形有正常的阴影，作为主投影，这时候再定义一个有一定弧度圆角的圆角矩形，然后放在正常矩形的下面，并露出一点点底部有弧度的阴影，这样的话就可以形成曲线投影的效果。

5、翘边阴影的实现

利用:before和:after，加上绝对定位的性质，可以形成一个矩形，这个时候结合CSS3的倾斜属性skew和旋转属性rote。就可以形成一个有旋转角度的平行四边形，这个时候再和原来的矩形重叠，则可产生翘边效果。