css
1 浏览器兼容性 CSS hack(针对IE6-,IE7,IE8,IE9以及其他浏览器)
‘ * ’ : 所有的IE浏览器都能识别
说明:在标准模式中
“-″减号是IE6专有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效,是IE8/9/10的hack
“\9\0″ 只对IE9/IE10生效,是IE9/10的hack
(还可以这样解决)
<!-- 放置所有浏览器的样式 -->
<link rel="stylesheet" href="/css/style.css" type="text/css">
<!-- 只放置IE必须的,而不能通过W3C的代码 -->
<!-- [if ie] -->
<link rel="stylesheet" href="/css/style.css" type="text/css">
<!-- [endif] -->
2 . css position有几个值,作用,默认元素的position是什么?
css position 有5个值,absolute(相对于static定位以外的第一个父元素进行定位) fixed (相对于浏览器窗口定位)relative(相对于其正常位置定位) static(默认值,没有定位) inherit(规定应该从父元素继承Position属性的值)
3. 行内元素有哪些?块级元素有哪些?CSS的盒模型?
块级元素:div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css盒模型:内容,border ,margin,padding
4.Css清除浮动方法
方法一:添加新的元素、应用 clear:both;
.clear{clear:both; height: 0; line-height: 0; font-size: 0} |
方法二:父级div定义 overflow: auto
.over-flow{
overflow: auto; zoom: 1; //zoom: 1; 是在处理兼容性问题
}
方法三 :after 方法:(注意:作用于浮动元素的父亲)
.outer {zoom:1;} /* for IE6/7 */
.outer :after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;} /*for FF/chrome/opera/IE8*/
5.简单列出所知道的css3以及html5的一些常用属性或者标签
Css3
border-radius 边框圆角 box-shadow 边框阴影
background-size 背景图片大小 text-shadow 文本阴影
word-wrap: normal | break-word 允许长单词换到下一行
word-break:normal | break-all | keep-all 规定自动换行的规则
text-overflow:clip | ellipsis | string
translate(50px,100px) , transform:rotate(30deg) , transform:scale(2,4);
transform:skew(30deg,30deg), transform:rotate(30deg).
过渡 transition
Html5
<canvas> <video> <audio> <footer> <header><hgroup><nav><time><article>
属性: data-aaa dir (规定元素中内容的文本方向) draggable(规定是否允许用户拖动元素) accesskey(规定访问元素的键盘快捷键)
Contenteditable (规定是否允许用户编辑内容)
6. 解释css sprites,如何使用。
Css 精灵
把一堆小的图片整合到一张大的图片上,减轻服务器对图片的请求数量
7. CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?
标签选择符 类选择符 id选择符
继承不如指定 Id>class>标签选择
后者优先级高
8. 你如何对网站的文件和资源进行优化?
文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用
9.Css布局:三列,中间宽度自适应,左右边宽度固定100px;
.box {width:100%;height:200px;position:relative;}
.left{position:absolute;left:0px;top:0px;width:100px;height:100%;}
.right{position:absolute;right:0px;top:0px;width:100px;height:100%;}
.center {margin-left:100px;margin-right:100px;height:100%;}
<div class="box">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
JS
- JS有几种数据类型 分别是什么?
字符串(string),数字(number),数组(array),布尔(boolean)
对象(object),Null , undefined
2.Jquery获取元素的宽
$.width() 获取内容区域的宽度(不包括padding margin border的宽度)
$.innerWidth() 获取到包括内边距的宽度(content+padding)
$.outerWidth() 获取到内边距+边框的宽度 (content+padding+border)
$.outerWidth(true) content+padding+border+margin)
3. 面象对象有几种模式,分别是什么?
单例模式 (就是一种最简单的面象对象, 一次只有一个实例)
工厂模式
构造函数
原型模式
4. Ajax有几个状态值,每个状态值代表什么意思?
0 - (未初始化)还没有调用send()方法
1 - (载入)已调用send()方法,正在发送请求
2 - (载入完成)send()方法执行完成,
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成,可以在客户端调用了
5. 简述JS的作用域以及作用域链
作用域:包含全局作用域和局部作用域
全局作用域使用范围①最外层函数和最外层函数外定义的变量有全局作用域
②所有未定义直接赋值的变量自动申明未拥有全局作用域
③所有window对象的属性拥有全局作用域
局部作用域:一般只在固定的代码片段内可以访问,比如:函数内部
6. this关键字
var name1 = "windowName";
function outer(){
var
name1 = "我是上一级作用域";
function
inner(){
//var name1 = "我是根本"
alert(this.name1); //这个是属性 输出是ABC 这里this指向的是window;
alert(name1); //这个是变量 输出的是cba这里考的是作用域,
}
inner();
}
- outer();
输出的顺序为: windowName 我是上一级作用域
7. 数组 split() join() 的区别 数组方法pop()
push() unshift() shift()
var str2 =
"012345678";
var str222 = str2.split("");
alert(str2.substring(2,8))
alert(str222)
split() 前者是切割成数组的形式,join()后者是将数组转换成字符串
Push()尾部添加 pop()尾部删除
Unshift()头部添加 shift()头部删除
输出:234567 0,1,2,3,4,5,6,7,8
8. 简述闭包是什么?有什么特性?对页面有什么影响?解决方法?
闭包是什么:闭包就是能够读取其他函数内部变量的函数
有什么特性:可以读取函数内部的变量,让变量的值始终保持在内存中
影响:使函数中的变量都保存在内存中,内存消耗大,网页性能问题,IE中导致内存泄露
解决方法: 退出函数之前,将不是用的局部变量全部释放
9. 利用原型以及原型链的原理,写2个函数 分别为加法和减法 ,实现 5+3-2
Number.prototype.plus = function(n){
return this+n;
}
Number.prototype.reduce = function(n){
return this - n
}
(5).plus(3).reduce(2)
10. 添加 删除 替换 插入到某个接点的方法
obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild