前端面试笔记（一）

css:

（1）块元素：div、p、h1、ul、ol、li、table、td、tr、dl、dt 等   不允许其他元素在同一行，宽高起作用

内联(行内)元素：a、b、br、em、i、img、input、span、select 等   允许其他元素在同一行，宽高不起作用

块转内联：display:inline     内联转块：display:block

 

（2）doctype的作用：

告知浏览器的解释器，应该用什么文档类型规范来解释这个文档。

 

（3）img标签中，alt和title属性的作用：

alt:在图片无法正常加载的时候，显示提示语。title鼠标在图片上停留时，显示文字内容。

（4）url、src和href的区别

url是统一资源定位符，一般在css中background中使用。

src是img标签的一个属性，定义img所在的路径。

href是a标签的属性，指向超链接的目标路径。

（5）px、em和rem区别。

px：

em:相对父元素字体大小，默认1em=16px。

rem:相对html元素字体大小

 

（6）cookies、sessionStorage和localStorage的区别

cookies:数组不会超过4k,设置过期的时间之前，即使关闭了会话窗口还是有效，数据自动传给服务器。

sessionStorage：只有在同一会话页面才能访问，当会话结束数据也会跟着销毁，数据不会传给服务器。

localStorage:持久化本地储存，除非主动删除数据，否则一直保存，数据不会传给服务器。

 

（7）display：none和visibility:hidden区别

两者都可以隐藏元素

display:隐藏元素不占空间。hidden:隐藏元素占空间。

 

（8）rgba()和opacity的透明效果有什么不同。

两者都能实现透明度的效果

rgba()：只作用于元素的颜色或者背景色。opacity:作用于元素以及元素内所有内容的透明度。

（9）清除浮动几种方式：

1.父级div定义 height

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。 

2.父级div定义 overflow:hidden

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度 

3. 结尾处加空div标签 clear:both

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度 

 

（10）定义一个div上下左右居中：

1.定位方式：

.box{
   width: 300px;
   height: 300px;
   background-color: #f4f4f4;
   position: absolute;
   }
.main{
  height: 100px;
  width: 100px;
  margin: 0 auto;
  position: relative;
  top:50%;
  background-color: red;
  margin-top: -50px;
  }

2.flex

.box {
   display: flex;
   justify-content: center; /* 主轴水平居中 */
   align-items: center;     /* 交叉轴垂直居中 */
   width: 300px;
   height: 300px;
   border: 1px solid red;
  }
.main {
   width: 100px;
   height: 100px;
   background-color: red;
        }

 

（11）

1.css写一个三角形：

.box{

    width:0;
    height:0;
    border-style:solid;
    border-width:20px;
    border-color:transparent transparent red transparnt;
}

2.css圆和椭圆：

圆：

椭圆：

 

 

预加载：

css预加载：

.div01 { 
background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px;
 }  
.div02 { 
background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; 
}  
.div03 {
 background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px;
}

js预加载：

//存放图片路径的数组
    var imgSrcArr = ['img01','img02','img03','img04'];

    var imgWrap = [];

    function preloadImg(arr) {
        for(var i =0; i< arr.length ;i++) {
            imgWrap[i] = new Image();
            imgWrap[i].src = arr[i];
        }
    }

    preloadImg(imgSrcArr);

    //或者延迟的文档加载完毕在加载图片

    $(function () {
        preloadImg(imgSrcArr);
    })

html5:

元素：audio(音频)、video(视频)、nav(导航栏)、header(页眉)、main(内容)、footer(页脚) 等！

 

ajax跨域问题：

1. 通过代理，比如可以通过代理服务器，或者后端获取，前端只需要访问后端的服务器就可以了

2. jsonp方法：

原理：JSONP的原型：创建一个回调函数，然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递，完成回调。

弊端：只支持get请求，不支持post请求。

<script>
    function callback(data){
        alert(data.message) //请求的数据
}
</script>


html:
<script src="https://baidu.com/test.js"></script>


test.js:

callback({message:"success"}); 

 

3.CORS方法

Cross-Origin Resource Sharing（CORS）跨域资源共享是一份浏览器技术的规范，提供了 Web 服务从不同域传来沙盒脚本的方法，以避开浏览器的同源策略，确保安全的跨域数据传输。现代浏览器使用CORS在API容器如XMLHttpRequest来减少HTTP请求的风险来源。与 JSONP 不同，CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。服务器一般需要增加如下响应头的一种或几种：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400

求默认不会携带Cookie信息，如果需要携带，请配置下述参数

"Access-Control-Allow-Credentials": true
// Ajax设置
"withCredentials": true

弊端：存在兼容性问题，特别是 IE10 以下的浏览器。

js和jq实现自适应：

1. 在html标签中meta添加

 <meta name="viewport" content="width=device-width,initial-scale=1.0,
    minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

width=device-width表示网页的宽度等于设备屏幕的宽度，initial-scale=1.0表示设置页面初始的缩放比例为1，maximum-scale=1.0 和 minimum-scale=1.0 表示设置最大的和最小的页面缩放比例,user-scalable=no表示禁止用户进行缩放。

并且使用rem不使用px：rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

 

2.使用百分比布局

 

3.响应式bootstrap插件

bootstrap下的栅格布局

 

4.相对长度单位em

em的特点 : ① em的值并不是固定的; ② em始终会继承父级元素的字体大小。

em（font size of the element）是指相对于父元素的字体大小的单位。

5.

配置 flexible
安装 lib-flexible

在命令行中运行如下安装：

npm i lib-flexible --save

引入 lib-flexible
在项目入口文件 main.js 里 引入 lib-flexible

// main.js
import 'lib-flexible'

js:

（1）let、const和var的区别

都是声明变量

let:不允许在相同的作用域重复声明同一个变量，只在声明的块作用域内有效，没有变量提升（即变量不可以在声明之前使用）。

const:声明一个只读的变量，一旦声明的变量就不能改变也必须初始化，在后面出现的代码中不能再修改该常量的值，只声明不赋值就会报错，只在声明的块作用域内有效，没有变量提升。

var:只声明不赋值就不会报错，会显示undefined，变量可以不赋值，有变量提升。

 

（2）setTimeout 和setInterval区别

setTimeout 只执行一次
setInterval 会一直重复执行

 

（3）编写一个方法去掉数组里面 重复的内容  var arr=[1,2,3,4,5,1,2,3]
一个数组去重的简单实现

var arr = ['abc','abcd','sss','2','d','t','2','ss','f','22','d'];

var s = []; //定义一个新的数组

for(var i = 0;i<arr.length;i++){  //遍历数组

    if(s.indexOf(arr[i]) == -1){  //判断在s数组中是否存在，不存在则push到s数组中

        s.push(arr[i]);

    }

}

console.log(s);//输出结果：["abc", "abcd", "sss", "2", "d", "t", "ss", "f", "22"]

方法二：用sort()  然后相邻比较也可以实现
 

（4）基本数据类型:Undefined (未定义)、Boolean(布尔型true或false)、String(字符串)、Number(数值)、Object(对象或null)、Function(函数)

引用数据类型：Object(对象)、Array(数组)

 

数值的转换：

数值转字符串：var a=10,var age=a.toString()，

检测数据类型：

typeof检测基本数据类型：var a ;  console.log(typeof a)  //undefined

instanceof检测引用数据类型(返回true或false)

Array检测数组

 

（5）作用域：

基本数据类型的作用域：

var  num1=10;

var num2=num1;

他们是两个不同的number类型。互不影响。

引用数据类型的作用域：

var obj1=new Object();

var  obj2=obj1;

他们会指向同一个数据类型