Web前端人员必须掌握什么 CSS使用技巧有哪些

Web前端人员必须掌握什么？CSS使用技巧有哪些？无论你是Web前端新手还是资深前端开发工程师，都必须要掌握CSS知识。在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。接下来千锋小编就给大家分享几个使你的CSS更加简洁优雅的使用技巧。

1、position:fixed降级问题

不知道曾经的你是不是遇到吸顶效果，使用position:fixed属性可以实现吸顶效果，但如果其父元素中有使用transform，fixed的效果会降级为absolute。

解决方案：

既然会降级为absolute效果，该怎么解决这个问题呢?我们就可以考虑什么情况下fixed和absolute的表现效果会是一样的。即当使用fixed的直接父元素的高度和屏幕的高度相同时fixed和absolute的表现效果会是一样的。如果这个直接父级内的元素存在滚动的情况，那就加上overflow-y:auto。

#FormatImgID_0#

2、合理使用px|em|rem|%等单位

在CSS中有许多距离单位，比如px|em|rem|%，还有CSS3中的vh|vw等单位。那么我们在项目中应该如何使用呢?在移动端中的使用方法如下：

基础单位px。比如需要我们画一个r为5px的圆，如果我们使用rem作为单位，我们会发现在一些机型上的图案不圆，会呈现椭圆形。这是由于rem转px会存在精度丢失问题，所以这个时候我们就需要使用px配合dpr来实现。

相对单位rem。rem是CSS3新增的一个相对单位(root em)，即相对HTML根元素的字体大小的值，是自适应使用的最广泛的单位。

相对单位em。是相对当前元素的字体大小。一般建议在line-height使用em。因为在需要调整字体大小的时候，只需修改font-size的值，而line-height已经设置成了相对行高。

视口单位vw|vh。vw:1vw=视口宽度的1%;vh:1vh=视口高度的1%。以rem单位设计的弹性布局，需要在头部加载一段脚本来进行监听分辨率的变化来动态改变根元素字体大小，使得CSS与JS耦合在一起。那么如何解决这个耦合的问题呢?答案就是视口单位vw|vh。

3、合理使用变量

CSS原生也是存在变量的，使用规则如下：

变量定义的语法是：--;// *为变量名称。

变量使用的语法是：var();

无论是变量的定义和使用只能在声明块{}里面，CSS变量字符限制为：[0-9]、[a-zA-Z]、_、-、中文和韩文等。

4、内联首屏关键CSS

性能优化中有一个重要的指标——首次有效绘制(FMP)，即指页面的首要内容(primary content)出现在屏幕上的时间。这一指标影响用户看到页面前所需等待的时间，而内联首屏关键CSS(即 Critical CSS，可以称之为首屏关键 CSS)能给用户一个更好的心理预期。既然是内联关键CSS，也就说明我们只会将少部分的CSS代码直接写入HTML中，至于内联哪些CSS你可以使用Critical。

想拿高薪就要具备与之匹配的相关技能，如果你想快速掌握这些技能，可以选择专业的学习方式，带你快速搞定不可思议的前端技术。