1.css隐藏显示的方法
display:none
2.解释css sprites。并说如何使用
图片懒加载,在页面上的未可视区域可以添加一个滚动事件,判断图片位置与浏览器顶端的距离与页面的距离如果前者小于后者,优先加载
如果为幻灯片,相册等,可以使用图片预加载技术,将当前展示图片的前一张和后一张有限下载
如果图片为css图片,可以使用CSSspirte,SVGspirte,locnfont,Base64等技术
如果图片过大,可以使用特殊编码的图片,加载时会加载一张压缩的特别厉害的缩略图,一提高用户体验
如果图片展示区域小于图片的真实大小,则因在服务端根据业务需要先行进行图片压缩,图片压缩后大小与展示一致
3.清除浮动
clear:both
overflow:hidden
:after
4.什么是语义化的HTML
语义化标签就是尽量使用相对应的结构的含义的html的标签
5.split()
join()将数组转化为字符串,并用指定字符串分割
6.call和apply的区别
都可以改变指向
call有多少参数写多少参数
apply只要写一个arguments就已解决
7.获取非行间样式
function getStyle(obj,attr) {
if(obj.currentStyle) {
return obj.currentStyle[attr];
}else{
getComputedStyle(obi,false)[attr]
}
}
8.transform
旋转:rotate
扭曲:skew
缩放:scale
移动:translate
矩形变形:matrix
9.介绍一下css的盒子模型
css盒子模型又称框模型(Box Model),包含了元素内容(content),内边距(border),外边距(margin)
元素框的高度 = 元素(element)的height + padding的上下边距的值 + margin的上下边距的值 + boeder的上下宽度
旧模型:content+padding2+border2
新模型:width+border+padding=你设置的元素的宽度
新元素需要设置:-webkit-box-sizing:border-box
10.transform和animation的区别?
transition属性是一个简单的动画属性,非常简单非常容易用。可以说它是animation的简化版本
Animation也是通过指定某一个属性(如width、left、transform等)在两个值之间如何过渡来实现动画的,与 Transition不同的是,Animation可以通过keyframe显式控制当前帧的属性值,而Transition只能隐式来进行(不能指定 每帧的属性值),所以相对而言Animation的功能更加灵活。另外一个区别是Animation通过模拟属性值改变来实现动画, 动画结束之后元素的属性没有变化;而Transition确实改变了元素的属性值,动画结束之后元素的属性发生了变化
11.link和@import的区别是?
两者都是外部引用CSS的方式,但是存在一定的区别:
区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。
区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。
区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。
区别4:ink支持使用Javascript控制DOM去改变样式;而@import不支持。