美文网首页
刷前端面经笔记(三)

刷前端面经笔记(三)

作者: LHH大翰仔仔 | 来源:发表于2019-02-07 22:31 被阅读209次
1.var的变量提升的底层原理是什么?

JS引擎的工作方式是
1)先解析代码,获取所有被声明的变量;
2)然后再执行。
也就是分为预处理和执行这两个阶段。
变量提升:所有用var声明变量的语句都会被提升到代码头部。另外function也可看作变量声明,也存在变量提升的情况。

2.垂直水平居中的方式?

1)定位
父元素设置为:position: relative;
子元素设置为:position: absolute;
距上50%,据左50%,然后减去元素自身宽度的距离就可以实现

width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -50px;

2)flex布局

display: flex; //flex布局
justify-content: center; //使子项目水平居中
align-items: center; //使子项目垂直居中

3)tabel-cell

display: table-cell;
vertical-align: middle;//使子元素垂直居中
text-align: center;//使子元素水平居中
3.如何判断一个对象是否为数组
  1. Array.prototype.isPrototypeOf(obj)方法,判定Array是不是在obj的原型链中,如果是,则返回true,否则false;
  2. obj instanceof Array;
  3. Object.prototype.toString.call(obj);(==="[object Array]")
  4. Array.isArray(obj);
4.行内元素和块级元素有哪些?img属于什么元素?
块元素(block element)
  * address - 地址
  * blockquote - 块引用
  * center - 举中对齐块
  * dir - 目录列表
  * div - 常用块级容易,也是css layout的主要标签
  * dl - 定义列表
  * fieldset - form控制组
  * form - 交互表单
  * h1 - 大标题
  * h2 - 副标题
  * h3 - 3级标题
  * h4 - 4级标题
  * h5 - 5级标题
  * h6 - 6级标题
  * hr - 水平分隔线
  * isindex - input prompt
  * menu - 菜单列表
  * noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容
  * noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)
  * ol - 排序表单
  * p - 段落
  * pre - 格式化文本
  * table - 表格
  * ul - 非排序列表

内联元素(inline element)

  * a - 锚点
  * abbr - 缩写
  * acronym - 首字
  * b - 粗体(不推荐)
  * bdo - bidi override
  * big - 大字体
  * br - 换行
  * cite - 引用
  * code - 计算机代码(在引用源码的时候需要)
  * dfn - 定义字段
  * em - 强调
  * font - 字体设定(不推荐)
  * i - 斜体
  * img - 图片
  * input - 输入框
  * kbd - 定义键盘文本
  * label - 表格标签
  * q - 短引用
  * s - 中划线(不推荐)
  * samp - 定义范例计算机代码
  * select - 项目选择
  * small - 小字体文本
  * span - 常用内联容器,定义文本内区块
  * strike - 中划线
  * strong - 粗体强调
  * sub - 下标
  * sup - 上标
  * textarea - 多行文本输入框
  * tt - 电传文本
  * u - 下划线
  * var - 定义变量
可变元素
  可变元素为根据上下文语境决定该元素为块元素或者内联元素。
  * applet - java applet
  * button - 按钮
  * del - 删除文本
  * iframe - inline frame
  * ins - 插入的文本
  * map - 图片区块(map)
  * object - object对象
  * script - 客户端脚本

imginput属于行内替换元素。height/width/padding/margin均可用。效果等于块元素。

5.margin塌陷?

当两个盒子在垂直方向上设置margin值时,会出现塌陷现象
解决方法:

1.给父盒子添加border
2.给父盒子添加padding-top
3.给父盒子添加overflow:hidden
4.父盒子:position:fixed
5.父盒子:display:table
6.给子元素的前面添加一个兄弟元素
  属性为:content:"";
  overflow:hidden;

解决方法的主要原理就是设置盒子为BFC
BFC为页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。

6.伪类与伪元素的区别

1)伪类
伪类用于选择DOM树之外的信息,或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素,比如:link,:visited,:hover,:active;后者包含那些满足一定逻辑条件的DOM树中的元素,比如:first-child,:first-of-type,:target
2)伪元素
伪元素为DOM树没有定义的虚拟元素。不同于其他选择器,它不以元素元素为最小选择单元,它选择的是元素制定单元。比如::before表示选择元素内容的之前内容;::selection表示选择元素被选中的内容。
3)伪类/伪元素一览表
<伪类如下>

/*
:active      选择正在被激活的元素
:hover       选择被鼠标悬浮着元素
:link        选择未被访问的元素
:visited     选择已被访问的元素
:first-child 选择满足是其父元素的第一个子元素的元素    
:lang        选择带有指定 lang 属性的元素
:focus       选择拥有键盘输入焦点的元素
:enable      选择每个已启动的元素
:disable     选择每个已禁止的元素
:checked     选择每个被选中的元素 
:target      选择当前的锚点元素
*/

<伪元素如下>

/*
::first-letter    选择指定元素的第一个单词
::first-line      选择指定元素的第一行
::after           在指定元素的内容后面插入内容
::before          在指定元素的内容前面插入内容
::selection       选择指定元素中被用户选中的内容
*/
7.介绍一下JS的基本数据类型

Undefined,Null,Boolean,Number,String

8.JavaScript的typeof返回那些数据类型

undefined,string,boolean,number,symbol(ES6),object,function

9.介绍一下JS有哪些内置对象?

数据封装类对象:Object、Array、Boolean、Number、String
其他对象:Function、Argument、Math、Date、RegExp、Error

10.null和undefined的区别

1)null表示一个对象被定义了,值为“空值”;undefined表示不存在这个值。
2)变量被定义了,但是没有赋值时,就等于undefined
3)注意:在验证null时,要用===,因为==无法区分nullundefined
typeof null // "object" 说明:null是一个没有任何属性和方法的对象

11.对JSON的了解
  1. JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。
  2. 它是基于JavaScript的一个子集。数据格式简单,易于读写,占用带宽小。 如:{"age":"12", "name":"back"}
12.列举3种强制类型转换和2种隐式类型转换

强制:parseInt(),parseFloat(),Number(),(Boolean(),String()
隐式:==

13.input的type属性有哪些?

text:文本框
password:密码
radio:单选按钮
checkbox:复选框
file:文件选择域
hidden:隐藏域
button:按钮
reset:重置按钮
submit:表单提交按钮
image:图片按钮

14.IE和标准下有哪些兼容性的写法
var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
var target = ev.srcElement||ev.target
15.如何阻止事件冒泡

ie:阻止冒泡ev.cancelBubble = true;
IE ev.stopPropagation();

16.如何阻止默认事件

1)return false;2) ev.preventDefault();

欢迎关注

相关文章

  • 刷前端面经笔记(三)

    1.var的变量提升的底层原理是什么? JS引擎的工作方式是1)先解析代码,获取所有被声明的变量;2)然后再执行。...

  • 刷前端面经笔记(十)

    1.数组方法 1)join()把数组上午所有元素放入一个字符串。元素通过指定的分隔符进行分隔。该方法只接收一个参数...

  • 刷前端面经笔记(十一)

    1.栈的压入和弹出 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否可能为该栈的弹出顺序。假设压...

  • 刷前端面经笔记(十二)

    1.以下递归函数存在栈溢出的风险,请问如何优化? 解答: 2.请实现一个计算最大公约数的函数: 解答: 3.数组去...

  • 刷前端面经笔记(六)

    1.ES6中的let,const,var的区别是什么? var:声明全局变量;let:声明块级变量,即局部变量,以...

  • 刷前端面经笔记(一)

    1.CSS的盒子模型 包含元素内容content、内边距padding、边框border、外边距marginbox...

  • 刷前端面经笔记(五)

    1.XML和JSON的区别? 1)数据体积方面JSON相对于XML来讲,数据的体积小,传递的速度更快些2)数据描述...

  • 刷前端面经笔记(二)

    1.实现三栏布局(左右两边固定宽度,中间自适应) 1)浮动布局左右两边固定宽度,并分别设置float:left和f...

  • 刷前端面经笔记(四)

    1.说说前端中的事件流? 事件流描述的是从页面接收事件的顺序,DOM2级事件流包括下面几个阶段。事件捕获阶段处理事...

  • 刷前端面经笔记(八)

    1.apply,call,bind有什么区别? 三者都可以把一个函数应用到其他对象上,apply,call是直接执...

网友评论

      本文标题:刷前端面经笔记(三)

      本文链接:https://www.haomeiwen.com/subject/cgagsqtx.html