前端面试题整理~

有一个200x200的div，如何让它在不同分辨率的屏幕上上下左右居中展示，写出CSS实方式。

 div{
        position: absolute;
        top: 50%;
        left: 50%;
        width: 200px;
        height: 200px;
        background-color: blueviolet;
        transform: translate(-50%,-50%);
    }

有哪些清除浮动的方式请简述。

清除浮动的方式以及原理

h5有哪些新特性

• 新增video和audio
• 语义化标签
• 本地数据存储
• canves
• SVG
• Geolocation地理位置的获取，获取用户位置信息

语义化标签有什么作用

• 更方便开发和维护
• 便于SEO，搜索引擎可以更方便的识别页面的每个部分。
• 方便其他的设备解析（移动设备，盲人阅读器）
• header section nav aside article footer 等新元素

使用什么方法可以减少页面请求的加载时间？

• 合并请求 减少请求数量
• 压缩js和css文件
• 图片按需加载 压缩图片

bootstrap的实现原理

运用媒体查询 在不同屏幕的屏幕使用不同的容器宽度

CSS的选择器有哪些?层级关系是什么样的

从高到低排列

1.id选择器（#myid）

2.类选择器（.myclassname）

3.标签选择器（div,h1,p）

4.相邻选择器（h1+p）

5.子选择器（ul > li）

6.后代选择器（li a）

7.通配符选择器（*）

8.属性选择器（a[rel=“external”]）

9.伪类选择器（a:hover, li:nth-child）

px和em有什么区别

px

相对于长度单位，像素px是相对于显示器屏幕分辨率而言的

特点

• IE无法调整使用px为单位的字体大小

em

em是相对当前对象内文本的字体尺寸，比如当前行内文本没有设置大小，则相对于浏览器的默认字体尺寸

特点

• em的并不是固定的
• em会继承父级元素的字体大小

实现一个左中右居中布局，左右两端的盒子宽度为200，如何使中间的盒子自适应展示，请写出结构和样式。

flex 盒子实现方法

.box {
        display: flex;
        justify-content: space-around;
        text-align: center;
    }

    .box div:first-child,
    .box div:last-child {
        width: 200px;
        height: 200px;
        background-color: cadetblue;
    }
    .box div:nth-child(2) {
        flex: 1;
        background-color: cornflowerblue;
    }

gird布局方式

  

    .box {
        display: grid;
        grid-template-columns: 200px auto 200px;
        text-align: center;
    }

    .box div:first-child,
    .box div:last-child {
        background-color: cadetblue;
        height: 200px;
    }

    .box div:nth-child(2) {
        height: 200px;
        background-color: cornflowerblue;
    }

样式结构

    <div class="box">
        <div>
            我是左边
        </div>
        <div>
            我是中间

        </div>
        <div>
            我是右边
        </div>
    </div>

“5”+4的结果

字符串加任何数字都等于拼接
54
隐式转换做加法

+“5”+4 等于 9
-“5”+4 等于 -1

简述一下前端项目的开发流程

项目开发流程

如何使用axios封装请求

axios封装请求

promise有哪些状态

三种状态

• 初始化 pending
• 成功状态 resolve
• 失败状态 reject
• 同一时间只可以存在一种状态 一旦发生变化就不会再改变

一个简单的promise例子

  var p = new Promise((resolve, reject) => {
            //   要处理的请求
            resolve("成功")
            // 请求失败返回
            reject('失败')
        })


        p.then(res => {
            console.log(res)
        }).catch(err => {
            console.log(err)
        })

如果给定一个项目的开发流程时间，你达不到要求，你会怎么办？

开放性题目

说说你对原型链的理解

原型链和继承

你是如何解决跨域问题的？

跨域方式及实现原理

你在项目中遇到了什么问题？你是如何解决的？

HTML+CSS如何使元素居中对齐？

css垂直居中的十二种方式

如何理解CSS外边距的合并？

label标签的作用？

标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

标签的 for 属性应当与相关元素的 id 属性相同。

this在js中的作用

• 在全局变量中,this指向window
• 普通函数中，this指向该普通函数
• 在箭头函数中，调用者指向谁，this就指向谁
• 另一篇笔记

em和rem的区别

相同点：

• 都是相对长度单位

em：

• 相对于当前对象内文本的字体尺寸，如果当前文本字体没有设置。则相对于浏览器的默认字体尺寸。
• 值并不是固定的
• 会继承父元素的字体大小

rem：

• 相对的是HTML（网页）的根元素

给定一下数组，将数组进行随机排序

 const arr=[1,2,3,4,5,6,7,8,9,10,11,12]

随机排序

  function randomSort(a,b){
          return Math.random()>0.5?-1:1
      }

从小到大

    function randomSort(a, b) {
        return a-b;
    }

从大到小

从大到小排序
     function randomSort(a, b) {
            return b-a;
        }

写一个闭包

  var lastName="zzhangsan"
        var init=(function(){
            var lastName="lisi"
            function fun1(){
                console.log(lastName)
            }
            return fun1
        })()
        init()   lisi    不污染全局变量