2020前端面试常问考点附视频

分类：Flex作者：佚名

https://www.bilibili.com/video/BV1ek4y1r7GT

 

文章目录

 

day01 css3

1.标签语义化

image-20200602100347823

顾名思义，合理的标签干合适的事情

块级（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot

行级（display：inline）：a、span、small、strong、em、i、code、

行内块（display：inline-block）：img、input

区别：

1.行内元素与块级函数可以相互转换，通过修改display属性值来切换块级元素和行内元素，行内元素display：inline，块级元素display：block。

2.行内元素和其他行内元素都会在一条水平线上排列，都是在同一行的；块级元素却总是会在新的一行开始排列，各个块级元素独占一行，垂直向下排列，若想使其水平方向排序，可使用左右浮动（float：left/right）让其水平方向排列。

3.行内元素不可以设置宽高，宽度高度随文本内容的变化而变化，但是可以设置行高（line-height），同时在设置外边距margin上下无效，左右有效，内填充padding上下无效，左右有效；块级元素可以设置宽高，并且宽度高度以及外边距，内填充都可随意控制。

4.块级元素可以包含行内元素和块级元素，还可以容纳内联元素和其他元素；行内元素不能包含块级元素，只能容纳文本或者其他行内元素。

display还有none（隐藏dom）、flex（弹性）、table（表）

display：none和visibility：hidden、ocpacity：0（兼容用fliter）

filter滤镜：对比度、饱和度、阴影、色相、透明度

display：flex 响应式、兼容性

2.盒子水平垂直居中

image-20200602103929590

项目中经常遇到这种需求，最开始xxx，喜欢用flex，后来发现xxx，在xx博客上突然发现xx更好，xx解决了兼容性（拒绝背书式）

（1）定位1：需要知道父的宽高

​ 

{
position: absolute;
top:50%;
left:50%
 
margin-top:-25px;
margin-left:-50px;

}

（2）定位2：需要父亲有宽高限定

image-20200602104441568

（3）定位3：不需要父有具体宽高限制（兼容性不如上边Ie9+）

image-20200602104544584

（4）display:flex（ie10+）

image-20200602104701555

（5）js实现就是模拟css写样式

image-20200602105312471

（6）固定宽高的父级 display：table-cell 子级inline-block

image-20200602105621973

3.盒模型标准

content、padding、border、margin

标准盒模型（content-box）、ie怪异盒模型（border-box）、flex弹性伸缩盒模型、column多列盒模型

怪异盒模型的好处，固定到border控制宽高，不用重新计算padding和border

flex详见阮一峰的flex布局

image-20200602110927159

多列布局

image-20200602110944945

4.几大经典布局

–左右固定、中间自适应

圣杯布局

image-20200602113055173

image-20200602111514307

image-20200602111750547

image-20200602112147804

image-20200602112312975

双飞翼

image-20200602113022455

image-20200602111550553

image-20200602112454722

image-20200602112712306

使用calc

image-20200602113131602

使用flex

image-20200602113144394

定位实现

image-20200602113422644

image-20200602113433438

–移动端响应式布局

*媒体查询（一套）

*rem（应用于两套 中的移动端）

flex

vh/vw

day 02 js

1.对象深浅拷贝

image-20200602122734819

JSON.parse(JSON.stringify(obj))不能对函数、正则、时间对象、数字对象的时候会不好用

最佳递归实现（这个没搞function），自己加一下用instanceof即可,建议统一用Object.prototype.toString.call

image-20200602123354026

2.堆栈内存+闭包作用域

堆：存储引用类型值的空间

栈：存储基本类型值和指定代码的环境

image-20200602115032567

答案：培训，对象的key数字和字符串等效

image-20200602115046281

答案：珠峰，Symbol的特点，都是唯一的

image-20200602115802390

答案：培训，key会转化成字符串[Obejct object]

image-20200602120550762

答案：‘4’，alert弹出的会转化成字符串

image-20200602121224075

答案：‘1’ ‘4’

image-20200602122452877

3.一道面向对象面试题

image-20200602124314525

image-20200602125836033

4.EventLoop

同步异步、宏任务微任务

image-20200602130026037

image-20200602131032718

5.使下面输出1

image-20200602131851148

var a={
    toString = function*(){
        yield 1;
        yield 2;
        yield 3;
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

a.toString

会转换，规则：

对象==字符串 对象.toString

null==undefined 相等 但是和其他值不相等

NaN！=NaN

剩下的都转换成数字

数据劫持

image-20200602132658588

数组弹出

image-20200602132853832

day03 React常见

1.react双向绑定

image-20200602134144412

2.跨域问题

因为同源策略，采用前后端分离

Jsonp

只能get，不安全、有缓存、大小限制

iframe

  • window.name
  • document.domin
  • location.hash
  • post message

CORS-服务端配置

image-20200602134902535

http Proxy

webpack添加proxy

nginx反向代理

在build之后proxy不可以用，要服务器端nginx反向代理

3.组件中通信

image-20200602140431605

day 04 入门算法

1.数组去重和排序

去重

image-20200602141007745

排序

冒泡、插入、快速（略

image-20200602141908265

image-20200602142219139

image-20200602142301471

2.数组扁平化

image-20200602153619773

image-20200602154011399

image-20200602154650329

3.斐波那契数列

image-20200602162522480

image-20200602162915626

4.输出所有和N的连续正数序列

image-20200602163730800

image-20200602163742565

原文地址：https://blog.csdn.net/qq_42198495/article/details/108933409

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

css display:flex 属性
一：display:flex布局display:flex是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵
display:flex 布局详解2
1. flex设置元素垂直居中对齐在之前的一篇文章中记载过如何垂直居中对齐，方法有很多，但是在学习了flex布局之后，垂直居中更加容易实现HTML代码：1<divclass="demo">2<divclass="inner">3<p>这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试</p>4</div
移动端开发
移动端开发知识点pc端软件和移动端apppc端软件是什么，有哪些应用。常见的例子，比如360杀毒，photoShop，VisualStudioCode等等移动端app是什么，有哪些应用。常见的例子，比如手机微信，手机qq，手机浏览器，美颜相机等等PC端与移动端的区别第一：PC考虑的是浏览器的兼容性，移动端考
grid布局笔记
最近挺忙的，准备考试，还有其他的事，没时间研究东西，快周末了，难得学点东西，grid是之前看到的，很好奇，讲的二维的布局，看起来很方便，应该很适合移动端布局，所以今天抽时间学一学，这个当是笔记了。参考的是阮老师的博客。阮一峰：CSSGrid网格布局教程http://www.ruanyifeng.com/blog/2019/03/g
盒模型
display:flex;把容器设置为弹性盒模型（设置为弹性盒模型之后，浮动，定位将不会有效果）给父元素设置的属性：（1）display：flex---把容器设置为弹性盒模型。（2）flex-direction---设置弹性盒模型主轴方向默认情况下主
javascript – Flex禁用Safari键盘快捷键
我在网页上运行了一个Flex应用程序,我想使用Command←组合键在应用程序中触发某些操作.这在大多数浏览器上都很好,但在Safari上,浏览器拦截此键盘事件并导致浏览器“返回”事件.有没有办法,通过Flex或通过页面上的其他地方的JavaScript,我可以告诉Safari不要这样做？解决方法:简短的
flex布局，flex-item
flex布局，flex-item1<template>2<viewclass="container">3<viewclass="greentxt">4A5</view>6<viewclass="redtxt">7B8<
c# – 大屏幕多点触控交互式应用程序设计
我应该设计一个大型多点触控屏幕的应用程序.从大到大,我的意思是新闻广播员(大约55英寸及以上).该应用程序是一个交互式地图.我的问题是：开发应用程序的技术.我的第一个想法是在AdobeFlex中制作,但是HTML5也是如此……必须有一些非常棒的Java库用于触摸交互,但是在Windows平台上
左图有文字的一些CSS样式
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible&quo
弹性盒模型：flex多行多列两端对齐，列不满左对齐
【1】需求：  【2】解决方案：最近遇到布局上要求item两端对齐，且最后一行在列不满的情况下要求左对齐，使用flex的justify-content:space-between;实现时发现最后一行不能左对齐，而是两端对齐方式。 不是项目上想要的效果#网上查了一些资料，有两种方法可以实现效果：**1.
AS3无法从Java发送的套接字解​​码AMF3对象
我有一个java套接字服务器,它在连接时将Animal对象发送到Flash客户端.对象发送方式如下：Amf3Outputamf3Output=newAmf3Output(SerializationContext.getSerializationContext());amf3Output.setOutputStream(userSocket.getOutputStream());amf3Output.writeObject(animal)
java – 在JBoss上使用Flex / BlazeDS的Client.Error.MessageSend问题
我正在开发一个Flex3.4应用程序,它通过最新版本的BlazeDS与JBoss-4.2.2服务器上运行的JavaEE后端进行交互.当我在Tomcat上从FlashBuilder4beta2运行Flex应用程序时,一切都很好,Flex应用程序能够进行所需的远程调用.但我的生产环境是在JBoss上,当我将应用程序移动到JBoss时(更
java – NetConnection.Call.Failed偶尔在Flex3 / Tomcat / BlazeDS / Spring中发生
我有一个非常大的问题.我使用Flex3/Tomcat/BlazeDS/Spring编写了一个大型应用程序,在本地开发时运行良好,当我部署到公共开发环境时很好,但是当部署到我们的测试环境时经常失败.当远程处理请求花费大量时间(超过20秒)时,故障似乎最常发生.在我的开发服务器上,错误发生,但仅
HTML5的Day1
弹性和布局display:flex在ie6,ie7不兼容状态，一般在pc用的比较少,在手机端所有的浏览器都是支持的控制子元素在父元素里面的位置关系display:flex是给父元素加的文档流是按照主轴排列，只要父元素加了flex,那么里面的子元素全部可以直接添加宽高主轴的方向
FLEX源码分析
FLEX2.0源码分析（一）https://www.jianshu.com/p/8bc4c5f4b19fFLEX源码分析二（网络监测swizzle）https://www.jianshu.com/p/ffb95f2cbda6FLEX源码分析三（网络监测记录FLEXNetworkRecorder）https://www.jianshu.com/p/66267dc922c5FLEX源码分析四（Systemlog）https://www.jianshu.
页面伸缩布局实例
1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title><itle>6<style>7*{8margin:0;9padding:0;10
弹性盒子圣杯布局
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible&qu
flex与inline-flex
flex：将对象作为弹性伸缩盒显示inline-flex：将对象作为内联块级弹性伸缩盒显示两者都是使子元素们弹性布局，但是如果是flex，父元素的尺寸不由子元素尺寸动态调整，不设置时默认是100%，而inline-flex则会使父元素尺寸跟随子元素们的尺寸动态调整。
css实现手机端导航栏左右滑动
<html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width"><title>test<itle><stylemedia="screen">.tab-head{list-style-type:no
php – 查找位于指定距离之间的用户(使用用户的邮政编码)
有没有办法使用邮政编码找到径向距离？我的任务是搜索居住在指定距离内的所有用户.我知道用户的zipcodes.例如,距离当前位置25英里的用户.我有其他搜索类别,我正在使用mysql查询.我无法解决距离问题.我的后端是在PHP中Flex的前端和前端.对我来说最好的选择就是www.zip-codes.com
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot