前端面试题整理~

文章目录

    • 有一个200x200的div,如何让它在不同分辨率的屏幕上上下左右居中展示,写出CSS实方式。
    • 有哪些清除浮动的方式请简述。
    • h5有哪些新特性
    • 语义化标签有什么作用
    • 使用什么方法可以减少页面请求的加载时间?
    • bootstrap的实现原理
    • CSS的选择器有哪些?层级关系是什么样的
    • px和em有什么区别
    • 实现一个左中右居中布局,左右两端的盒子宽度为200,如何使中间的盒子自适应展示,请写出结构和样式。
    • "5"+4的结果
    • 简述一下前端项目的开发流程
    • 如何使用axios封装请求
    • promise有哪些状态
    • 如果给定一个项目的开发流程时间,你达不到要求,你会怎么办?
    • 说说你对原型链的理解
    • 你是如何解决跨域问题的?
    • 你在项目中遇到了什么问题?你是如何解决的?
    • HTML+CSS如何使元素居中对齐?
    • 如何理解CSS外边距的合并?
    • label标签的作用?
    • this在js中的作用
    • em和rem的区别
    • 给定一下数组,将数组进行随机排序
    • 写一个闭包

有一个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
      }

前端面试题整理~_第1张图片

从小到大


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

前端面试题整理~_第2张图片
从大到小

从大到小排序
     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    不污染全局变量

你可能感兴趣的:(记录)