前端面试题（基础篇四）

一、rgba()和opacity的透明效果有什么不同？

rgba() 和 opacity 都能实现透明效果，但最⼤的不同是 opacity 作⽤于元素，以及元 素内的所有内容的透明度，

⽽ rgba() 只作⽤于元素的颜⾊或其背景颜⾊。(设置 rgba 透明的元素的⼦元素不会继承 透明效果！)

二、css中可以让⽂字在垂直和⽔平⽅向上重叠的两个属性是什么？

垂直⽅向： line-height   行高

⽔平⽅向： letter-spacing  字符间距

三、如何垂直居中一个浮动元素？

/** ⽅法⼀：已知元素的⾼宽 **/

#div1 {

        background-color : #6699FF ;

        width : 200px ;

        height : 200px ;

        position : absolute ; // ⽗元素需要相对定位

        top : 50% ;

        left : 50% ;

        margin-top : -100px ; // ⼆分之⼀的 height ， width

        margin-left : -100px ;

}

/** ⽅法⼆ :**/

#div1 {

        width : 200px ;

        height : 200px ;

        background-color : #6699FF ;

        margin : auto ;

        position : absolute ; // ⽗元素需要相对定位

        left : 0 ;

        top : 0 ;

        right : 0 ;

        bottom : 0 ;

}

四、px和em的区别

px 和 em 都是⻓度单位，区别是px 的值是固定的，指定是多少就是多少，计算⽐较 容易。 em 的值不是固定的，并且 em 会继承⽗级元素的字体⼤⼩。（做响应式一般使用em）

浏览器的默认字体大小都是 16px 。所以未经调整的浏览器都符合: 1em=16px 。那么 12px=0.75em , 10px=0.625em 。

五、Sass、LESS是什么？⼤家为什么要使⽤它们？

它们是 CSS 预处理器，是 CSS 上的⼀种抽象层，是⼀种特殊的语法、能将语⾔编译成 CSS 。

例如Less是⼀种动态样式语⾔. 将CSS赋予了动态语⾔的特性，如变量，继承，运算， 函 数。LESS 既可以在客户端上运⾏ (⽀持 IE 6+ , Webkit , Firefox )，也可⼀在服务端 运⾏ (借助 Node.js )