刷前端面经笔记（三）
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 ;
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 - 客户端脚本
img 、 input 属于行内替换元素。 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 时，要用 === ，因为 === 无法区分 null 和 undefined 。
typeof null // "object" 说明： null 是一个没有任何属性和方法的对象
11.对JSON的了解
1) JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
2) 它是基于 JavaScript 的一个子集。数据格式简单，易于读写，占用带宽小。 如： {"age":"12", "name":"back"}
12.列举3种强制类型转换和2种隐式类型转换
强制： parseInt()，parseFloat()，Nunber() ，（ 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() ;
正文到此结束
热门推荐
相关文章
近期评论
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
搞个gitee的项目
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
