面试总结题

最新推荐文章于 2020-04-03 18:13:53 发布

22guanerye123

最新推荐文章于 2020-04-03 18:13:53 发布

阅读量197

点赞数

各个浏览器中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");