记亚信的一次笔试题

九月初参加亚信笔试，在这里记录一下，之后也在掘金记录本身做为小菜鸟的成长过程。

---

对Markdown还不是很熟悉，因此排版会差一点，抱歉了;

一、列举经常使用的行内标签块级标签和空标签

• 行内元素：和其它元素在同一行上，元素宽/高及顶部/底部边距不可设置，元素宽度为包含内容宽度不可改变
  • 例如：a、big、br、code、em、i、img、input small、span、strong、label、q
• 块级元素：每一个块级元素都重新一行开始，元素宽/高及顶部/底部边距可自定义，元素默认状况下和它父元素宽度一致
  • 例如： div、dl、form、h系列、menu、p、pre、ul、ol
• 空元素：指的是在HTML中，没有内容
  • 例如：br、hr、input、img、link

---

二、display有哪些经常使用值说明它们的做用

* display:none;//此元素不会被显示
 * display:block;//此元素以块级元素展现，先后有换行符
 * display:inline;//默认值，之内联元素显示，无先后换行符
 * display:inline-block;//行内块级元素
 * display:table;//此元素以块级表格来显示 
复制代码

---

三、谈谈position的几种定位

* positipon:static;//默认值，没有定位;
 * position:relative;//相对定位，相对于其原先所占的位置为基准进行偏移；
 * position:absolute;//绝对定位，相对于第一个非默认定位之外的父元素进行定位；
 * position:fixed;//固定定位，相对于浏览器窗口进行定位，且不会随屏幕滚动；
复制代码

---

四、简单说一下盒子模型

• 盒子模型有两种：
  • W3C标准盒子模型
  • IE的怪异盒子模型
• W3C定义的标准盒模型包括：

* margin border padding content
复制代码

• 标准盒模型中元素的width=content；
• IE怪异盒模型大体与标准盒模型相同，区别在于：
  • 怪异盒模型中元素的width=content+padding+border
• 在CSS3中：

* box-sizing:content-box
  * box-sizing:border-box
  * box-sizing:inherit
  * box-sizing: inherit;//规定应从父元素继承 box-sizing属性的值。
复制代码

• 即box-sizing指定盒子模型种类
  • content-box指定盒子模型为W3C（标准盒模型)
  • border-box为IE盒子模型（怪异盒模型）

---

五、H5和CSS3的新特性

• 语义化标签： header、footer、nav、section、aside、article
• 音频视频：audio，video
• 绘制：canvas
• 拖拽：draggable 设置为true 能够被拖拽
• 本地存储：
• localStorage - 没有时间限制的数据存储；
• sessionStorage - 针对一个session的数据存储，
• 当用户关闭浏览器窗口后，数据会被删除；
• 新事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause

CSS3中新特性

• 选择器：

* :last/first-child选择元素首/尾子代
   * :nth-child(num/even/odd)选择指定/偶数/奇数
   * :checked选择每一个被选中的元素
   * ::selection选择被用户选取的元素部分
复制代码

• 伪类

* a:link{color:skyblue}选择未访问的连接
  * a:hover{color:skyblue}鼠标移动到连接上
  * a:avtive{color:skyblue}选中的连接
复制代码

• 背景和边框

* background-size:规定背景图尺寸
   * background-origin:规定背景图片的定位区域
   * 背景图片能够放置于 content-box、padding-box 或 border-box 区域
   * border-radius:圆角
   * box-shadow/text-shadow:阴影
   * border-image:边框图片
   * translate():元素从当前位置移动，根据给定的left(x坐标)和top(y坐标)参数
复制代码

---

六、谈谈浮动和如何清除浮动

• 清除浮动：为解决高度坍塌
• 由于子元素浮动，使父元素高度没法被撑起，形成高度坍塌
• 这是需在父元素身上设置overflow:auto/hidden就能够了
• 另外一种清除浮动的方法是在需清除浮动元素的前面增长空div
• 设置样式clear：both;

---

七、谈谈ajax中的get和post并手写一个ajax

get和post都是ajax中最经常使用的两种请求方式其中：

• get方法
  • get中传参请求是在URL的尾部利用 “？”表明URL地址结尾与数据参数的开端，后边以名称=值的形式且以&进行链接
  • get请求参数客户端可见，所以不安全
  • 由于是在地址符上拼接参数因此传送数据量小（2KB左右）
• post方法
  • post中传参是放在http主体中，
  • 参数隐藏所以更安全，且传输数据量大
• 手写ajax

function hxp_ajax(obj){
   if(obj.type.toLowerCase()=='get'){
       var arr=[];
       for(var jian in obj.data){
           let str=`${jian}=${obj.data[jian]}`;
           arr.push(str);
       }
       var ps=arr.join('&');
       data.url+=ps;
   }else{
       var formdata=new FormData();
       for(let jian in obj.data){
           formdata.append(jian,obj.data[jian]);
       }
   }
var xhr=new XMLHttpRequest();
   xhr.onreadystatechange=function(){
       if(xhr.readyState==4){
           if(xhr.status==200){
               console.log(xhr.responseText)
               console.log(JSON.parse(xhr.responseText))
           }
       }
   }
   xhr.timeout=3000;
   xhr.timeout=function(){
       console.log('请求超时')；
   }
   xhr.open(obj.type,obj.url,true);
   obj.type.toLowerCase()=='get'?xhr.send(null:xhr.send(formdata);
}
复制代码

---

八、谈谈cookie、sessionStorage、localStorage

• cookie
  • cookie数据始终在同源http请求中携带，在浏览器和服务器之间来回传递
  • 大小：cookie传输数据很小不超过4KB，
  • 做用：http请求都会携带cookie，只适合携带小数据如：会话标识
  • 过时时间：仅在设置的cookie过时时间以前
• sessionStorage和localStorage
  • 两者通常仅在本地保存
  • 大小：两者都很大可达5M以上
  • 过时时间：
    • sessionStorage仅在当前浏览器页面关闭以前有效
    • localStorage始终有效，即便浏览器页面/窗口关闭也会一直保存
  • 做用：用做持久数据的保存

---

九、谈谈JavaScript中的原型链和继承

这里涉及了不少,我我的也作了不少笔记,这里只大体说下

• JavaScript能经过原型链实现方法的继承复用,这大大的减小了重复的代码编写，也让代码更加的整洁规范
• 原型链实现继承（其实就是子类继承父类属性和方法）
• 实现继承的关键之处在于

Son.prototype = new Father();
  var sonObj_2 = new Son();
复制代码

• 这里很好理解经过new Son()生成的实例对象

sonObj_2中的proto指向Son.prototype
  而Son.prototype又指向Father的实例对象
  Father的实例对象的proto指向Father.prototype
  所以Son实例化出的对象经过原型链的查找
  都具备构造函数Father身上的属性和方法了
复制代码

十、给定一个字符串，输出字符串中出现频率最高的字符

function seleMax(){
   var str=document.getElementById('text').value;
   var arr=str.split('');
   var json=[];
   for(let i=0; i<arr.length;i++){
       json[arr[i]]?json[arr[i]]+=1:json[arr[i]]=1;
   }
   var char='';
   var num=0;
   for(var hxp in json){
       json[hxp]>num?(num=json[hxp],char=hxp):null
   }
   console.log(json);
   console.log(`出现频率最高的字符为${char},它出现了${num}次`);
}
复制代码

和网传的同样，亚信的笔试题很简单，虽然如此但上面不少内容是我后来又搜集一些补充上来的，整理过程不免有些错误，做为一名大四的小菜鸡，诚心但愿各位指正；