CSS相关面试题

（1） css3新增特性有哪些

答：css3比css2多了一些新特性,你像更丰富的选择器.nth-child,nth-of-type，first-child,last-child等一些伪类选择器还有圆角：border-radius,盒阴影：box-shadow,渐变:linear gradiendt还有动画：transition(过渡),transform（实现位移(translate)，倾斜(skew)，旋转(rotate)，缩放(scale)）,animation（关键帧动画）配合@keyframes等

以及@media 和flex弹性盒子

动画性能优化的方式是通过写3d效果的.比方说translate3D(20px,20px,0);可以开启浏览器的GPU硬件加速

Animation 和 转换效果有什么区别?

1.transform过渡只有开始和结束两种状态；

2.animation有开始，过程，结束多种状态可以控制过程.还能控制播放次数吧

（2） 如何实现一个div垂直居中（至少3种方法）

答：其实实现水平垂直剧中方法有很多：

第一种：定位：

第一种思路：父元素relative,子元素absolute.并且left,right,top,bottom设置为0,margin:auto即可以水平垂直居中

第二种思路：父元素relative,子元素absolute，left为50%,top为50%,再给div设置距左是负自身的一半即：margin-left:负自身宽度/2,margin-top:负自身高度/2。

第三种思路：父元素relative,子元素absolute，left为50%,top为50%，再给div设置跨左和跟上是自身的一半：transform:translate3d(-50%,-50%,0)

第四种：flex布局:

思路：有两个div，父级div和子级div，给父级div设置display:flex,并且设置父级div的水平居中justify-content:center，并且给父级div设置垂直居中align-items:center即可

(3) clearfix是解决什么问题的

答：一种万能清浮动的方式.利用了添加伪元素,加到父级,相对于clear:Both.少加了一个标签;

.clearfix:after {

 content: " ";

     display: block;

     clear: both;

     height: 0;

}

(4) 什么是BFC

它就是一个block format content块级格式化上下文.是一个布局里面的概念.把一个盒子设置成bfc之后,里面无论怎么布局.都不会影响外面的变动.另外如果是一个bfc盒子.浮动的元素也会参数计算.用它可以解决一些布局方面的问题吧.比方说.margin重叠.高度塌陷等. overflow:hidden.float. display:inline-block;

(5) 说一下你对盒模型的理解(包括IE和w3c标准盒模型)

答：哦，盒模型其实就是浏览器把一个个标签都看一个形象中的盒子，那每个盒子（即标签）都会有内容(width,height)，边框(border)，以及内容和边框中间的缝隙（即内间距padding），还有盒子与盒子之间的外间距（即margin）,用图表示为：

当然盒模型包括两种：IE盒模型和w3c标准盒模型

IE盒模型/怪异盒模型=设置的width宽度+margin的值,其中,width值包含了padding和border;

标准盒模型＝width+padding+border+margin

那如何在IE盒模型宽度和标准盒模型总宽度之间切换呢，可以通过box-sizing:border-box(怪异)或设置成content-box(标准)来切换

其中：box-sizing：border-box //IE盒模型

box-sizing：content-box //w3c盒模型

（6）css3动画

答：哦，您问的css3动画啊，css3动画大致上包括两种：

第一种：过渡动画：主要通过transition来实现，通过设置过渡属性，运动时间，延迟时间和运动速度实现。

第二种：关键帧动画：通过animation配合@keyframes艾特K父瑞木斯实现

transition动画和animation动画的主要区别有两点：

第一点transition动画需要事件来触发，animation不需要

第二点:transition只要开始结束两种状态，而animation可以实现多种状态，并且animation是可以做循环次数甚至是无限运动

(7) 手机端如何做适配的

答：我了解的做适配的方法有：百分比，em,rem,媒体查询(响应式的.即media query),flex布局（即弹性盒），vw,vh等

目前我在项目中用的是rem，flex布局的方式.，有时会用到媒体查询，在做pc响应式布局时用

主要是用了一个手淘的js库flexible.js,在页面变化时,检测页面宽度,除以10份,动态的赋值给font-size.属性.;而页面的布局我是通过rem来进行布局的,所以就可以适配所有的移动端设备了

(8) rem和em的区别

答：rem和em都是相对单位，主要参考的标签不同：

rem是相对于根元素的fontsize属性，即相对于

标签的font-size实现的，浏览器默认字号是font-size:16px

em:是相对于父元素标签的字号，和百分比%类似，%也是相对于父级的，只不过是%相对于父级宽度的，而em相对于父级字号的

(9) vw和vh了解吗

答：相对于视口的变换

vw和vh分别相对于屏幕宽度和屏幕高度的，1vw相当于屏幕宽度的1%,100vw相当于满屏宽度100%,

vh和vh类似，只不过是相对于屏幕高度的，1vh相当于屏幕高度的1%,100vh相当于满屏高度的100%,

你平时怎么写css（或者说佻用过css预处理器吗，用过Less和SASS吗？）

答：一般咱们说我平时写css用less，可以定义变量，嵌套，混入等功能

sass语法和less类似都是css预处理器，less里面定义变量是@符号 sass里面定义变量是$符号方便开发人员写快速高效写css

此处要知道修改公司第三方样式库样式在scoped下,需要用到样式穿透.搞懂三种样式穿透的方式 >>> /deep/