面试总结题
来源:互联网 发布:淘宝能赚到钱吗 编辑:程序博客网 时间:2024/05/19 16:05
各个浏览器中css表现的差异性(浏览器兼容问题):
(http://www.douban.com/group/topic/4629864/)
(http://www.iefans.net/ie-9-css-bug/)
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类型)
可以和我一起沟通的哦~Q2220782523
- 面试 题 总结
- 面试算法题总结
- 面试基础题总结
- 面试总结题
- 面试算法题总结(一)
- 面试算法题总结(二)
- 微软面试100题总结
- mitbbs @ 面试做题总结
- 面试精选逻辑推理题总结
- 笔试题总结-第一次面试
- java面试算法题总结
- 笔试-面试算法题总结
- 【面试】第一次面试总结
- 面试总结
- 面试总结
- 面试总结
- 面试总结
- 面试总结
- 国内有哪些好的刷题网站?
- CMake 使用第一篇
- php 地区无限极分类处理方式
- 不安全配置Nginx可能导致的安全漏洞
- win7+ubuntu双系统安装方法
- 面试总结题
- linux服务器配置https访问
- 《python核心编程第二版第六章》习题 补
- 【Hive】hive的数据压缩
- PHP微信支付开发
- [自学]Java发展史
- soj1303 KM算法
- linux--有名管道
- Depth-first Search -- Leetcode problem394. Decode String