前端面试题总结
2017-11-02 11:36
197 查看
====各个浏览器中css表现的差异性(浏览器兼容问题):
1,各浏览器下,margin与padding显示差异
==解决办法:CSS reset
2,block+float+水平margin,IE6里的间距比超过设置的间距(横向布局)
==解决办法:diaplay:inline
(不用担心内联元素无宽高,因为float会让inline元素haslayout,让inline元素表现的和inline-block元素一样有宽高和垂直内外边距)
[我们最常用的就是div+CSS布局了,而div就是一个典型的块属性标签,横向布局的时候我们通常都是用div
float实现的,横向的间距设置如果用margin实现,这就是一个必然会碰到的兼容性问题] 3,inline+(display:block)+float+水平margin,IE6里的间距比超过设置的间距
说明:该情况与上面的差不多,只是此处的元素一开始是内联元素,加了display:block的CSS属性.因为它本身就是行内属性标签,所以我们再加上display:inline的话,它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe
==解决办法:display:inline;display:table;
4,IE6对margin:0 auto;不会正确的进行解析
解决办法:
在父元素中使用text-align:center,在元件中使用text-align:left
5,无法设置微高(一般小于10px):
说明:当设置元素高度小于10px时,IE6和IE7不受控制,超出设置的高度
产生原因:IE不允许原件的高度小于字体的高度
解决办法1:设置字体大小:font-size:0;
解决办法2:给超出高度的标签设置overflow:hidden
解决办法3:设置行高line-height小于你设置的高度
6,子元件撑破父元件
原因:父元件设置了overflow:auto属性,子元件会从父元件中撑破出来
解决办法:父元件中设置position:relative;
7,IE无法解析min-height和min-width
解决办法1:
selector{
min-height:150px;
height:auto !important;
height:150px;
}
解决办法2:
selector{
min-height:150px;
height:150px;
}
heml>body selector{
height:auto;
}
8,使用ul li时,li与li之间会空行
解决办法1:设置li selector{height:**px;}
解决办法2:liselector{float:left;clear:left;}
解决办法3:li{display:inline}
====CSS hack:
+:IE6,IE7
_:IE6
\9:IE6,IE7,IE8
\0:IE8,IE9
\9\0:IE9
!important:All(IE6是有条件的支持)
====常用的CSS reset:
margin:0;
padding:0;
border:0;
...
====盒子模型
padding,border,margin,content;
标准盒模型与IE盒模型:
前者:width设置针对content
后者:width针对border+padding+content
对于盒子的选择:
需要依靠最上面的Doctype来看,如果没有声明Doctype,则按照浏览器会根据自己的行为去理解网页;声明后各浏览器会按照W3C标准去解释你的盒子,网页就能在各个浏览器中显示一致了
====性能优化的几个原则:
1,尽量减少http请求:
改善响应时间的最简单途径就是减少组件的数量,并由此减少HTTP请求的数量:
(1)将多个图片合并到一张单独的图片
(2)JS、CSS文件合并
2,使用内容发布网络(CDN的使用):
是一组分布在多个不同地理位置的Web服务器,用于更加有效地向用户发布内容;
主要用于发布页面静态资源:图片、css文件、js文件等。如此,能轻易地提高响应速度.
3,添加Expires头
4,将CSS样式表放在顶部
5,将javascript脚本放在底部
6,避免使用CSS表达式
7,使用外部javascript和CSS
8,减少DNS查询
9,精简javascript
10,避免重定向
11,删除重复脚本
12,配置ETag
13,使Ajax可缓存
14,避免使用CSS表达式
====JS的数据类型
基本数据类型(5):string,number,null,undefined,boolean
引用类型:object,array,function;
数据类型 typeof
string string
number number
boolean boolean
undefined undefined
null object
object object
array object
function function
(NaN) (number)
(Error) (Function)
区分基本数据类型:typeof;
区分引用数据类型:instanceof(instanceof还可以检测到具体的是什么实例,可以检测是否是正则表达式)
eg:[1,2,3,4] instanceof Array; //true
\d{3} instanceof RegExp; //true
区分各数据类型:
Object.prototype.toString.call(val).slice(8,-1);
eg:Object.prototype.toString.call([1,2,3]).slice(8,-1); //Array
obj instanceoftypeName;
eg:[1,2,3]instanceof Array; //true
obj.constructor.toString().indexof(typeName);
eg:[1,2,3].constructor.toString().indexof("Array");
//9(只要值不为-1,即为typeName类型)
WEB前端学习交流群21 598399936
1,各浏览器下,margin与padding显示差异
==解决办法:CSS reset
2,block+float+水平margin,IE6里的间距比超过设置的间距(横向布局)
==解决办法:diaplay:inline
(不用担心内联元素无宽高,因为float会让inline元素haslayout,让inline元素表现的和inline-block元素一样有宽高和垂直内外边距)
[我们最常用的就是div+CSS布局了,而div就是一个典型的块属性标签,横向布局的时候我们通常都是用div
float实现的,横向的间距设置如果用margin实现,这就是一个必然会碰到的兼容性问题] 3,inline+(display:block)+float+水平margin,IE6里的间距比超过设置的间距
说明:该情况与上面的差不多,只是此处的元素一开始是内联元素,加了display:block的CSS属性.因为它本身就是行内属性标签,所以我们再加上display:inline的话,它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe
==解决办法:display:inline;display:table;
4,IE6对margin:0 auto;不会正确的进行解析
解决办法:
在父元素中使用text-align:center,在元件中使用text-align:left
5,无法设置微高(一般小于10px):
说明:当设置元素高度小于10px时,IE6和IE7不受控制,超出设置的高度
产生原因:IE不允许原件的高度小于字体的高度
解决办法1:设置字体大小:font-size:0;
解决办法2:给超出高度的标签设置overflow:hidden
解决办法3:设置行高line-height小于你设置的高度
6,子元件撑破父元件
原因:父元件设置了overflow:auto属性,子元件会从父元件中撑破出来
解决办法:父元件中设置position:relative;
7,IE无法解析min-height和min-width
解决办法1:
selector{
min-height:150px;
height:auto !important;
height:150px;
}
解决办法2:
selector{
min-height:150px;
height:150px;
}
heml>body selector{
height:auto;
}
8,使用ul li时,li与li之间会空行
解决办法1:设置li selector{height:**px;}
解决办法2:liselector{float:left;clear:left;}
解决办法3:li{display:inline}
====CSS hack:
+:IE6,IE7
_:IE6
\9:IE6,IE7,IE8
\0:IE8,IE9
\9\0:IE9
!important:All(IE6是有条件的支持)
====常用的CSS reset:
margin:0;
padding:0;
border:0;
...
====盒子模型
padding,border,margin,content;
标准盒模型与IE盒模型:
前者:width设置针对content
后者:width针对border+padding+content
对于盒子的选择:
需要依靠最上面的Doctype来看,如果没有声明Doctype,则按照浏览器会根据自己的行为去理解网页;声明后各浏览器会按照W3C标准去解释你的盒子,网页就能在各个浏览器中显示一致了
====性能优化的几个原则:
1,尽量减少http请求:
改善响应时间的最简单途径就是减少组件的数量,并由此减少HTTP请求的数量:
(1)将多个图片合并到一张单独的图片
(2)JS、CSS文件合并
2,使用内容发布网络(CDN的使用):
是一组分布在多个不同地理位置的Web服务器,用于更加有效地向用户发布内容;
主要用于发布页面静态资源:图片、css文件、js文件等。如此,能轻易地提高响应速度.
3,添加Expires头
4,将CSS样式表放在顶部
5,将javascript脚本放在底部
6,避免使用CSS表达式
7,使用外部javascript和CSS
8,减少DNS查询
9,精简javascript
10,避免重定向
11,删除重复脚本
12,配置ETag
13,使Ajax可缓存
14,避免使用CSS表达式
====JS的数据类型
基本数据类型(5):string,number,null,undefined,boolean
引用类型:object,array,function;
数据类型 typeof
string string
number number
boolean boolean
undefined undefined
null object
object object
array object
function function
(NaN) (number)
(Error) (Function)
区分基本数据类型:typeof;
区分引用数据类型:instanceof(instanceof还可以检测到具体的是什么实例,可以检测是否是正则表达式)
eg:[1,2,3,4] instanceof Array; //true
\d{3} instanceof RegExp; //true
区分各数据类型:
Object.prototype.toString.call(val).slice(8,-1);
eg:Object.prototype.toString.call([1,2,3]).slice(8,-1); //Array
obj instanceoftypeName;
eg:[1,2,3]instanceof Array; //true
obj.constructor.toString().indexof(typeName);
eg:[1,2,3].constructor.toString().indexof("Array");
//9(只要值不为-1,即为typeName类型)
WEB前端学习交流群21 598399936
相关文章推荐
- 前端周报:前端面试题及答案总结;JavaScript参数传递的深入理解
- 年总结2015前端面试题集锦及答案解析
- 前端面试总结---CSS相关面试题
- 前端面试题总结 HTML+CSS篇(一)
- Js前端面试题总结
- 2016前端面试题总结
- 前端相关面试题总结
- 某一线互联网公司前端面试题js部分总结
- 总结一下前端面试题之Html和CSS
- 前端面试题总结HTML CSS部分
- Web前端面试题总结
- 前端开发面试题总结
- 前端常见面试题总结---第三篇
- 总结一下前端面试题之Html和CSS
- 前端周报:前端面试题及答案总结;JavaScript参数传递的深入理解
- 总结一下前端面试题之Html和CSS
- 总结的公司招聘前端人员时的面试题
- 2016前端面试题总结
- 2017自己前端面试题总结
- 前端常见面试题总结---第四篇