12.1 清除浮动 参考答案： 除浮动其实叫做闭合浮动更合适，因为是把浮动的元素圈起来，让父元素闭合出口和入口不让他们出来影响其他的元素。 在CSS中，clear属性用于清除浮动，其基本语法格式如下： 选择器{clear:属性值;} /*属性值为left,清除左侧浮动的影响 属性值为right,清除右侧浮动的影响 属性值为both,同时清除左右两侧浮动的影响*/ 额外标签法 1.1 末尾标签法 通过在浮动元素的末尾添加一个空的标签。这是W3C推荐的做法，虽然比较简单，但是添加了无意义的标 签，结构化比较差，所以不推荐使用。下面三种写法都适用： 1. <div style=&q...

11.11 布局: 三栏布局(平均分布) 参考答案： flex:1 : 设置父级弹性盒，子盒子三个各占1份 <div class="Grid"> <div class="Grid-cell">1/3</div> <div class="Grid-cell">1/3</div> <div class="Grid-cell">1/3</div> </div> .Grid { display...

11.7 实现扇形、圆形 参考答案： 圆形： border-radius圆角的四个值按顺序取值分别为：左上、右上、右下、左下。这里只设置一个值，代表四个角的取值都为为50% 原理：border-radius: 50% 弯曲元素的边框以创建圆。由于圆在任何给定点具有相同的半径，故宽和高都需要保证一样的值，不同的值将创建椭圆。 <div class="circle"></div> <style> .circle { border-radius: 50%; width: 80px; height: 80px;...

11.1 未知高度元素垂直居中、垂直居中的实现方式有哪些？ 参考答案： 1、绝对定位+css3 transform:translate(-50%，-50%) .wrap{ position:relative; } .child{ position: absolute; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); } 2、css3 的flex布局 .wrap{ display:flex; justify-content:center; } .child{ align-self:center;...

10.6 样式优先级 参考答案： 样式类型 样式类型分为三类 行间 <h1 style="font-size:12px;color:#000;">我的行间CSS样式。</h1> 内联 <style type="text/css"> h1{font-size:12px; color:#000; } </style> 外部 <link rel="stylesheet" href="css/style.css"> 选择器...

10.1 继承相关 css的继承：就是给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承。 官方解释，继承是一种规则，它允许样式不仅应用于特定的html标签元素，而且应用于其后代元素。 无继承性的属性 1、display：规定元素应该生成的框的类型 2、文本属性： vertical-align：垂直文本对齐 text-decoration：规定添加到文本的装饰 text-shadow：文本阴影效果 white-space：空白符的处理 unicode-bidi：设置文本的方向 3、盒子模型的属性：width、height、margin 、margin-top、ma...

9.1 CommonJS规范 参考答案： CommonJS规范加载模块是同步的，只有加载完成，才能执行后面的操作。 CommonJS规范中的module、exports和require 每个文件就是一个模块，有自己的作用域。每个模块内部，module变量代表当前模块，是一个对象，它的exports属性（即module.exports）是对外的接口。 module.exports属性表示当前模块对外输出的接口，其他文件加载该模块，实际上就是读取module.exports变量。 为了方便，Node为每个模块提供一个exports变量，指向module.exports。 let exports...

8.18 给定一个字符串，请你找出其中不含有重复字符的 最长子串 的长度 参考答案： 思路分析： 对字符串进行遍历，使用String.prototype.indexOf()实时获取遍历过程中的无重复子串并存放于str，并保存当前状态最长无重复子串的长度为res，当遍历结束时，res的值即为无重复字符的最长子串的长度。 代码示例： /** * @param {string} s * @return {number} */ var lengthOfLongestSubstring = function(s) { var res = 0; // 用于存放当前最长无重复子串的长度 ...

8.13 实现一个 JS 的sleep 参考答案： 普通版 function sleep(sleepTime) { for(var start = new Date; new Date - start <= sleepTime;) {} } var t1 = +new Date() sleep(3000) var t2 = +new Date() console.log(t2 - t1) 优点：简单粗暴，通俗易懂。 缺点：这是最简单粗暴的实现，确实 sleep 了，也确实卡死了，CPU 会飙升，无论你的服务器 CPU 有多么 Niubility。 Promise 版本 functio...

8.6 js中两个数组怎么取交集+(差集、并集、补集) 参考答案： 最普遍的做法 使用 ES5 语法来实现虽然会麻烦些，但兼容性最好，不用考虑浏览器 JavaScript 版本。也不用引入其他第三方库。 直接使用 filter、concat 来计算 var a = [1,2,3,4,5] var b = [2,4,6,8,10] //交集 var c = a.filter(function(v){ return b.indexOf(v) > -1 }) //差集 var d = a.filter(function(v){ return b.indexOf(v) == -1 }) //补...

8.3 防抖和节流的原理和使用场景 参考答案： 函数防抖和函数节流：优化高频率执行js代码的一种手段，js中的一些事件如浏览器的resize、scroll，鼠标的mousemove、mouseover，input输入框的keypress等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，需要对这类事件进行调用次数的限制。 防抖： 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。 根据函数防抖思路设计出第一版的最简单的防抖代码： var timer; // 维护同一个timer function debounce(fn, delay)...

8.1 文件异步上传怎么实现 参考答案： 普通表单上传 使用PHP来展示常规的表单上传是一个不错的选择。首先构建文件上传的表单，并指定表单的提交内容类型为enctype="multipart/form-data"，表明表单需要上传二进制数据。 <form action="/index.php" method="POST" enctype="multipart/form-data"> <input type="file" name="myfile"&g...

7.1 为什么js是单线程 参考答案： 这主要和js的用途有关，js是作为浏览器的脚本语言，主要是实现用户与浏览器的交互，以及操作dom；这决定了它只能是单线程，否则会带来很复杂的同步问题。 举个例子：如果js被设计了多线程，如果有一个线程要修改一个dom元素，另一个线程要删除这个dom元素，此时浏览器就会一脸茫然，不知所措。所以，为了避免复杂性，从一诞生，JavaScript就是单线程，这已经成了这门语言的核心特征，将来也不会改变 扩展： 什么是进程？ 进程：是cpu分配资源的最小单位；（是能拥有资源和独立运行的最小单位） 什么是线程？ 线程：是cpu调度的最小单位；（线程是建立在进程的基础...

6.3 ES6 与 ES5 继承的区别 参考答案： ES6 中有类 class 的概念，类 class 的继承是通过 extends 来实现的，ES5 中是通过设置构造函数的 prototype 属性，来实现继承的。 ES6 与 ES5 中的继承有 2 个区别，第一个是，ES6 中子类会继承父类的属性，第二个区别是，super() 与 A.call(this) 是不同的，在继承原生构造函数的情况下，体现得很明显，ES6 中的子类实例可以继承原生构造函数实例的内部属性，而在 ES5 中做不到。 解析： 下面通过 3 个 demo，来分析它们之间的区别。 ES5 继承 直接上代码： funct...