我所遇-前端笔试题总结

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

1、css选择符
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
2、超级链接<a>，四种状态
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的优势。
嵌入：嵌入<head> <style type="text/css"> { xxx:xxx;} </style> 不利于代码的维护，以及样式的重用；时候单页面样式
导入外部文件： <head> <style type="text/css"> @import "xxx.css"</style> </head> 页面加载完成之后再装载css文件，文件太大，便会刚开始只有标签显示，之后再有页面渲染。
链接引入<link> 在执行到<head>加载引入文件，渲染。

 <link rel="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

我所遇-前端笔试题总结

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

猜你喜欢