我所遇-前端笔试题总结

一句话：好好学习，天天向上。机会总是给有准备的人；技不如人，就回去修炼。

1、css选择符
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
2、超级链接，四种状态
a:link :未访问
a:hover :鼠标在链接上，鼠标滑动
a:active :鼠标点击
a:visited :访问过后
注：hover，需要在link和visited（如果存在）之后。
3、关于css hack
” * “、“ _ ”是ie共有属性； “ - ”是ie6的专有属性；“ ！important ”ie6以上生效。
谷歌：-webkit- 内核：blink（基于webkit、Google、opera software）
火狐：-moz- 内核：gecko
ie内核：trident
4、关于typescript
5、清除浮动的几种方式，和他们的优缺点

• 创建一个空标签；为其添加样式 clear：both,（可以清除任何标签，但是添加了多余的空白标签）
• 在浮动元素的父节点上面加上overflow:hidden(或者overflow : auto);zoom:1（兼容ie6） 减少不必要的空标签，overflow可能带来页面展示问题。
• 在浮动元素的父元素添加 ：after

div:after
    {
        clear:both;
        content:'';/*content:'.'*/;
        height：0;/*高度为0；否则可能比实际高出几倍*/
    };

 在下一个标签清除兄弟节点的浮动元素时，直接clear:both;

6、css引入方式、优缺点

• 行内：在标签内部书写样式，太繁琐，也没有体现css的优势。
• 嵌入：嵌入 不利于代码的维护，以及样式的重用；时候单页面样式
• 导入外部文件： 页面加载完成之后再装载css文件，文件太大，便会刚开始只有标签显示，之后再有页面渲染。
• 链接引入 在执行到加载引入文件，渲染。

 "stylesheet" type="text/css" href = "xx.css" >

7、使用javascript判断一个字符串中出现次数最多的字符，并且统计这个字符出现的次数

function choose(arr){
    let obj = {};
    for(let i=0,length = arr.length;i++){
        var s = arr.charAt[i];
        if( obj[s] ){
            obj[s]++;
        }else{
            obj[s] = 1;
        }
    } 
    let max = 0,maxchar ;//最大数,最大字符
    for(let key in obj){
        if(max < obj[key]){
            max = obj[key];
            maxchar = key;
        }
    }
}

8、正则表达式

9、jsonp
组成：回调函数和数据；
回调函数：当响应来了到来时应该在页面调用的函数；数据：传入回调函数中的json数据。
jsonp采用的是get请求。

10、javascript事件模式
事件冒泡：
事件捕获：
11、盒子模型

• 标准盒子：box-sizing:content-box;(设置的宽高是内容content的宽高，设置padding会将盒子撑大）；

      盒子模型：宽=width+padding+ border+margin 
      盒子模型实际大小 ： 宽=width+padding +border
  

• 怪异盒子：box-sizing: boder-box;（设置高度width包含的padding和内容content）；

      盒子模型 ： 宽=width + margin
      盒子模型实际大小 : 宽 = width
  

• 弹性盒模型（css3）:父元素添加 display :flex /display ：inline-flex;

  1、定义盒模型的主轴方向：
       flex-direction :row   /   column 
        -webkit-box-orient :  horizontal   /    vertical
  
  2、定义元素的排列顺序 ：
      flex-direction : row-reverse  /  column-reverse
       -webkit-flex-direction : normal /  reverse
  
   3、沿主轴方向对齐方式：
       justify-content : flex-start(从头挨着填充）\  flex-end(从尾部向前挨着填充)\
           conter(居中紧挨着填充） \ space-between(平均分布) \space-around (子元素均分父元素宽度，子元素盒子内居中）
       -webkit-justify-content ：
  4、侧轴方向对齐方式：
       align-items : flex-start  \   flex-end  \   center  \  baseline(文字基线对齐）
       -webkit-flex-align  :
  5、定义子元素的换行方式：
       flex-grow  :  nowrap(盒子模型单行，子元素可能会溢出）    \    wrap  (弹性盒模型我多行）   \  wrap-reverse( 反转）
       -webkit-flex-align
  6、设置元素具体位置：
        order :  数字越小越靠前，最小值默认处理为1;
        -webkit-flex-order