(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/