一些常见的面试题

发表于 | 分类于 |

浏览器页面有哪三层构成，分别是什么，作用是什么？

构成： 结构层、表示层、行为层

分别是： HTML CSS JavaScript

作用： HTML实现页面结构；CSS完成页面的表现与风格；JavaScript实现一些客户端的功能与业务。

什么是语义化的HTML？

  • 直观的认识标签，对于搜索引擎的抓取有好处，用正确的标签做正确的事情。
  • html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析。
  • 在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的。
  • 搜素引擎的爬虫依赖标签来确定上下文和各个关键字的权重，利于SEO。
  • 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

CSS居中（包括水平居中和垂直居中）

水平居中设置

内联元素居中

  1. 行内元素

    设置 text-align:center;

  2. Flex布局
    设置display:flex; justify-content: center;(灵活运用，支持Chrome，Firefox，IE9+)

  3. 设置dispaly:table-cell 再设置 vertical-align:middle;

块级元素居中

  1. 定宽块状元素 设置左右margin:auto;
  2. 不定宽块状元素
    • 在元素外加入table标签（完整的，包括table,tbody,tr,td),该元素写在td内，然后设置
      margin: auto;
    • 给该元素设置display: inline;
    • 父元素设置position:relative和left: 50%, 子元素设置position:relative和left: 50%

垂直居中设置

  1. 使用position:absolute(fixed),设置left,top,marign-left,margin-top的属性；
  2. 使用position:fixed(absolute)属性， margin:auto这个不要忘记；
  3. 使用display: table-cell属性使内容垂直居中；
  4. 使用css3的新属性transfrom:translate(x,y)属性；
  5. 使用:before元素

CSS3有哪些新特性？

CSS3实现圆角（border-radius: 8px)，阴影（box-shadow: 10px)，对文字加特效（text-shadow），
线性渐变（gradient），变换（transform）【rotate/旋转, scale/缩放, translate/位移, skew/倾斜】

增加了更多的CSS选择器、多背景、 rgba。

事件委托是什么？

让利用时间冒泡的原理，让自己的所触发的时间，让他的父元素代替执行！

添加、删除、替换、插入到某个接点的方法

obj.appendChild()

obj.removeChild()

obj.replaceChild()

obj.insertBefore()

什么叫优雅降级和渐进增强？

  1. 优雅降级

    Web站点在所有新式浏览器中都能正常工作，如果用户使用额是老式浏览器，则代码会检查以确认它们
    是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了，为那些
    无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。

  2. 渐进增强

    从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能，向页面增加无害于基础
    浏览器的额外样式和功能。当浏览器支持时，它们会自动地呈现出来并发挥作用。

JavaScript原型，原型链？有什么特点？

  1. 原型对象也是普通的对象，是对象一个自带隐式的proto属性，原型也有可能有自己的原型，如果一个原型
    对象的原型不为null的话，我们就称之为原型链
  2. 原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链

如何阻止事件冒泡和默认事件

阻止冒泡

现代浏览器：e.stopPropagation();
低版本浏览器： e.cancelBubble = true;

阻止默认事件

现代浏览器： e.preventDefault();
低版本浏览器：return false;

IOS苹果和微信中音频和视频实现自动播放的方法

// 一般情况下，这样就可以自动播放了，但是一些奇葩IPone机不可以
document.getElementById('audio').play();
// 必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效
document.addEventListener('WeixinJSBridgeReady',funciton () {
    document.getElementById('audio').play();
    document.getElementById('video').play();
}, false);