前端面试一

你的名字 2022-03-01 00:18 229阅读 0赞

**前端面试题**

第一阶段 HTML、CSS、HTML5、CSS3

**1、XHTML、HTML、XML的异同**

XHTML-Extensible Hypertext Markup Language：可扩展超文本标记语言，以 **XML 应用的方式**定义的 HTML，更严格更纯净的 HTML 版本

HTML-Hypertext Markup Language：超文本标记语言，用来**显示数据**，即用**标记标签**来**描述网页**的一种语言

XML-Extensible Markup Language：可扩展标记语言，用来传输和扩展数据

HTML5

HTML5 是最新的 HTML 标准；拥有新的语义、图形以及多媒体元素

HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件

HTML5 提供的新元素、新的 API 简化了 web 应用程序的搭建

HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行

XPath-是一门在 XML 文档中查找信息的语言，XPath 可用来在 XML 文档中对元素和属性进行遍历

XPath 使用路径表达式在 XML 文档中进行导航  
XPath 包含一个标准函数库  
XPath 是 XSLT 中的主要元素  
XPath 是一个 W3C 标准

**1）XHTM和HTML相比最重要的区别**

文档结构

*  XHTML中的 DOCTYPE 是**强制性的**
 *  XHTML中的<html>、<head>、<title> 以及 <body> 也是**强制性的**
 *  <html> 中的 XML namespace 属性是**强制性的**

### 元素语法 ###

*  XHTML 元素必须**正确嵌套**
 *  XHTML 元素必须始终**关闭**
 *  XHTML 元素必须**小写**
 *  XHTML 文档必须有**一个根元素**

### 属性语法 ###

*  XHTML 属性必须使用**小写**
 *  XHTML 属性值必须用**引号包围**
 *  XHTML 属性最小化也是**禁止的**

### 这是xhtml必不可少的元素 ###

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <title>Title of document</title>
    </head>
    
    <body>
    ......
    </body>
    
    </html>

2）XML和HTML的主要差异

XML 不是 HTML 的替代

XML 和 HTML 为不同的目的而设计

XML 被设计为传输和存储数据，其焦点是数据的内容，旨在传输信息；XML是不作为的、仅仅是纯文本、可以自定义标签

HTML 被设计用来显示数据，其焦点是数据的外观，旨在显示信息

**9、面向对象的定义？面向对象的基础特性**

**1、定义：**面向对象(Object Oriented,OO)是软件开发方法。面向对象的概念和应用已超越了程序设计和软件开发，扩展到如数据库系统、交互式界面、应用结构、应用平台、分布式系统、网络管理结构、CAD技术、人工智能等领域。面向对象是一种对现实世界理解和抽象的方法，是计算机编程技术，发展到一定阶段后的产物

**2、基础特性：**

1）唯一性：每个对象都有自身唯一的标识，通过这种标识，可找到相应的对象。在对象的整个生命期中，它的标识都不改变，不同的对象不能有相同的标识

2）抽象性：是指将具有一致的数据结构（属性）和行为（操作）的对象抽象成类。一个类就是这样一种抽象，它反映了与应用有关的重要性质，而忽略其他一些无关内容。任何类的划分都是主观的，但必须与具体的应用有关

3）继承性：继承性是子类自动共享父类数据结构和方法的机制，这是类之间的一种关系。在定义和实现一个类的时候，可以在一个已经存在的类的基础之上来进行，把这个已经存在的类所定义的内容作为自己的内容，并加入若干新的内容

4）多态性：是指相同的操作或函数、过程可作用于多种类型的对象上并获得不同的结果。不同的对象，收到同一消息可以产生不同的结果，这种现象称为多态性

**9、移动端touch和click的区别**

[原文链接][Link 1]   [https://blog.csdn.net/fanhu6816/article/details/53467824][Link 1]

**touch的事件**

//移动端touch的4种事件，每个触摸事件被触发后，会生成一个event对象
    touchstart:     //手指放到屏幕上时触发
    touchmove:      //手指在屏幕上滑动式触发
    touchend:    //手指离开屏幕时触发
    touchcancel:     //系统取消touch事件的时候触发，这个好像比较少用

**移动端touch事件和click事件的区别**

在移动端，手指点击一个元素会经过touchstart -> touchmove -> touchend -> click

**在移动端touchstart和click的触发条件是有区别的**

touchstart：手指开始触摸DOM元素的时候触发

click：手指触摸dom开始，且手指未曾在屏幕上移动（某些浏览器允许移动一个非常小的位移值），且在这个dom上手指离开屏幕，且触摸和离开屏幕之间的间隔时间较短（某些浏览器不检测间隔时间，也会触发click）才能触发

**click事件在移动端有时延的问题**

使用fastclick插件可以消除在移动端click事件带来时延的问题

**只触发touch事件，不触发click事件**

使用preventDefault()阻止事件的默认行为

var content = document.querySelector(".content");  
    content.addEventListener("touchstart", function(e){  
        e.preventDefault(); 
        content.style.background = "#0F0";  
    })  
    
    // 这个事件在touchstart里面不会触发
    content.addEventListener("click", function(e){  
            content.style.background = "#00F";  
    });

**9、移动端移到过的坑**

**1）移动端click事件300ms延迟**

在移动端，click事件会经过300ms的延迟后才触发。因为**移动浏览器**提供一个：**双击（double tap）放大**功能，用户碰触页面之后，需要等待一段时间来判断是不是双击（double tap）动作，而不是立即响应单击（click），等待的这段时间大约是300ms

**解决方法：**

**A、使用fastclick插件**：会消除所有click事件的延迟（这里介绍在vue构建SPA项目中的使用方法）

首先、在项目本地安装fastclick插件：npm install fastclick  --save

然后、在main.js中引进该插件：import fastclick from 'fastclick'

最后、将其附加到document.body中：fastclick.attach(document.body)

**B、不用click事件**，用移动设备提供的**原生touch事件**，或某些**移动端手势库**提供的**tap事件**

移动端touch事件提供了 `touchstart` 、 `touchmove` 、 `touchend等，`由touchstart和touchend组合成tap事件，首先要判断touchend和touchstart的偏移距离，然后阻止掉touchend事件300ms之后触发的click事件，并且始终以touchend事件作为触发的必要条件

**2）移动端点击穿透**

在带有href属性的a标签的范围内，有某个返回按钮，在点击返回按钮后，页面快速切换到有a标签的页面，**300ms后触发了click事件，**从而触发了**a标签的意外跳转**，这个就是典型的点击穿透问题。罪魁祸首其实就是**a标签跳转默认是click事件触发**，而**移动端的touch事件触发之后**，依然会在**300ms后触发click事件**

**解决方法：**

自己封装一个tap事件，并且自己阻止掉300ms后的click事件，即设置e.preventDefault()/e.stopPropagation() 来阻止click事件

**3）移动端1px border实现**

由于**设备高分辨率**的原因，逻辑像素的 **1px 的 border** 在**移动设备**上会用**两个或三个物理像素**来表示，所以看起来会感觉很粗。

**解决方案：**

但兼容性最好的方案是用**伪元素的 box-shadow 或 border** 实现 **border**，然后用 **transform: scale(.5) **缩小到原来的一半

.block {
          width: 100px;
          height: 100px;
          margin: 10px;
          position: relative;  //让其伪类元素相对其定位
          /*border: 1px solid red;*/
    }
    .block:before {
    	  display:block;
    	  position: absolute;
    	  top: 0;
          left: 0;
          content: '';
          border: 1px solid red;
          width: 200%;
          height: 200%;
          transform: scale(.5);
    }

**4）移动端选择相片------**一定要显示的声明accept接收的类型

**5）移动端伪类 :active 不起作用**

document.addEventListener('touchstart',function(){},false);

**6）ios或android下触摸元素时出现半透明灰色遮罩**

-webkit-tap-highlight-color:rgba(255,255,255,0)

**7）keyup和keydown在IOS设备上失效**

**在IOS设备**上用**第三方输入法**是无法用**keyup**事件来监听的，因为ios系统做了**屏蔽机制**

**解决方法：**

给元素对象绑定事件监听：

$('#input').bind('input propertychange', function() {  
        alert("....")  
    });

**9、前端页面构造中遇到过什么样的兼容性问题，如何解决（常见的兼容性问题），浏览器常见的兼容性问题**

**1）不同浏览器默认的margin和padding不同**

//设置统一格式
    *{margin：0；padding：0} 统一格式

**2）ie6中，子元素设置浮动以后，内部元素内容撑不开父元素的高度**

//解决方法
    父元素内部的块级元素也设置浮动

**3）浮动后的元素，在ie6即以下版本出现横向的双边距bug**

任何浮动元素的外边距加倍，如元素设置margin-left:15px，在浏览器下显示margin-left:30px

//解决方法
    给元素添加display：inline；

**4）3px问题**\---在IE6及以下版本的IE中，两个相邻的div之间有3px间隙，一个div使用float，另一个没有使用

解决方法：给浮动元素设置IE6的hack，即在margin_right前面添加下划线，_margin-right:-3px

**5）在IE6,7下，li本身没有浮动，li里面的元素有浮动，li下出现间隙的问题**

//解决方法
    常规下给li加vertical-align:top 如果最下间隙和最小高度bug共存的时候，利用hack给li添加浮动

**6）在IE6下，当浮动元素和绝对定位元素是兄弟关系的时候，绝对定位会失效**

//解决方法
    给父级也加相对定位

**7）ie6中元素宽高小于19px，会当成19px处理**

//解决方法
    设置overflow:hidden;

**8）IE8及以下版本的浏览器不支持opacity，解决方法添加IE滤镜alpha()**

Opacity:0.8;
     
    Filter:alpha(opacity=80);
     
    -ms-filter:”progid:DXImageTransform.Microsoft.Alpha(opacity=80)”;

**9）在IE6和IE7下父级有边框（border）的时候，子元素的margin会失效**

//解决方法
    父级元素设置zoom：1；

**10）在IE6.7下，子级元素有相对定位，父级overflow包不住子级元素**

//解决方法
    给父级也加相对定位

**11）IE超链接hover点击后失效**：使用正确的**书写顺序**  link  visited  hover  active  
**12）IE给子元素设置z-index不生效**：给**父级**添加**position:relative  
13）IE  min-height不生效**：在min-height的末尾加上**！important**解决

**14）H5标签在IE5/IE6下不兼容**

比如<header>、<section>、<footer>等标签在IE5/IE6下不会按照预设的css显示

**解决方法**：通过js的document.createElement('header')，通过js创建的元素默认为是自定义标签（内联元素），如果想设置宽高，需给每个元素添加display:block。

**问题**：如果需要创建的元素比较多，就很麻烦。

**另一个解决方案**：引入H5  JS插件

**3、IE中与其他浏览器不一样的地方**

1）IE支持currentStyle，Firefox使用getComputStyle（获取非行内元素的样式）  
2）IE使用innerText，FireFox使用textContent  
3）滤镜方面：IE：filter:alpha(opacity= num)；Firefox：-moz-opacity:num  
4）发生事件：IE下，window.event表示发生事件，非IE浏览器下，事件对应的函数有一个隐藏的变量e，表示发生事件  
5）添加事件监听方面：IE：attachEvent：火狐是addEventListener  
6）触发事件对象：IE使用event.srcElement；Firefox使用event.target  
7）鼠标位置：IE是event.clientX；火狐是event.pageX

**132、ie 和标准下有哪些兼容性的写法**

**1）获取事件对象**：var ev = ev || window.event

**2）获取页面的可视区的宽度：**document.documentElement.clientWidth || document.body.clientWidth

**3）获取触发事件的事件源：**var target = ev.srcElement||ev.target

**42、写出5 种以上ie6 bug 的解决方法，哪些你认为是解决起来最麻烦的？**

**1）双边距BUG**：**float**引起的，使用display:inline（在IE7,Firefox等浏览器下能正确解释左边距10px。但是在IE6下会理解为左边距20px。也就是说，**在与浮动同方向的空白边会加倍**，解决方法是**为这个div的css中添加：display:inline，**这样就可避免双倍边距bug）

**2）3px空隙问题**：**float**引起的，使用display：inline （当使用float浮动容器后，在IE6下会产生3px的空隙，因为是确切的3px，所以可以设置负边距来解决，比如.left\{margin-right:-3px;\}

**3）超链接hover点击后失效**：使用正确的**书写顺序**  link  visited  hover  active  
**4）给子元素设置z-index不生效**：给**父级**添加**position:relative  
5）min-height不生效**：在min-height的末尾加上**！important**解决  
**6）IE6中奇数宽高的bug**： IE6还有**奇数宽高的bug**，解决方案就是**将外部相对定位的div宽度**改为**偶数            
7）IE6下图片下方有空隙产生**：解决这个bug的方法也有很多，可以是**改变HTML的排版**，或者定义**img为display：block**；或者定义vertical-align属性值为**vertical-align**：**top | bottom |  middle | text-bottom**；可以设置**父容器的字体大小为零，font-size:0          **

**9、最近3个月学了什么**

补充基础知识，对所做过的基础项目进行总结归纳，在网上做题

基础知识：网络协议的了解（http,tcp,udp等）、Vue源码学习、jquery源码学习、nodejs的学习、ES6的学习、mysql的学习、学习js的设计模式、函数式编程理念、stylus的学习、webpack的学习

**9、全排列算法**

// 从n个不同元素中任取m（m≤n）个元素，按照一定的顺序排列起来，叫做从n个不同元素中取出m个元素的一个排列。
    // 当m=n时所有的排列情况叫全排列
    // 全排列是一种时间复杂度为：O(n!)的算法
    
    // 算法一：求模算法（非递归）----0.3s
    /*  
    全排列（非递归求模）算法  
    1、初始化存放全排列结果的数组result，与原数组的元素个数相等；  
    2、计算n个元素全排列的总数，即n!；  
    3、从>=0的任意整数开始循环n!次，每次累加1，记为index；  
    4、取第1个元素arr[0]，求1进制的表达最低位，即求index模1的值w，将第1个元素（arr[0]）插入result的w位置，并将index迭代为index\1；  
    5、取第2个元素arr[1]，求2进制的表达最低位，即求index模2的值w，将第2个元素（arr[1]）插入result的w位置，并将index迭代为index\2；  
    6、取第3个元素arr[2]，求3进制的表达最低位，即求index模3的值w，将第3个元素（arr[2]）插入result的w位置，并将index迭代为index\3；  
    7、……  
    8、直到取最后一个元素arr[arr.length-1]，此时求得一个排列；  
    9、当index循环完成，便求得所有排列。  
    例：  
    求4个元素["a", "b", "c", "d"]的全排列, 共循环4!=24次，可从任意>=0的整数index开始循环，每次累加1，直到循环完index+23后结束；  
    假设index=13（或13+24，13+2*24，13+3*24…），因为共4个元素，故迭代4次，则得到的这一个排列的过程为：  
    第1次迭代，13/1，商=13，余数=0，故第1个元素插入第0个位置（即下标为0），得["a"]；  
    第2次迭代，13/2, 商=6，余数=1，故第2个元素插入第1个位置（即下标为1），得["a", "b"]；  
    第3次迭代，6/3, 商=2，余数=0，故第3个元素插入第0个位置（即下标为0），得["c", "a", "b"]；  
    第4次迭代，2/4，商=0，余数=2, 故第4个元素插入第2个位置（即下标为2），得["c", "a", "d", "b"]；  
    */ 
    // var count = 0;  
    // function show(arr) {  
    //     console.log("P<sub>" + ++count + "</sub>: " + arr);  
    // }  
    // function perm(arr) {  
    //     var result = new Array(arr.length);  
    //     var fac = 1;  
    
    //     for (var i = 2; i <= arr.length; i++){
    //     	fac *= i;   //全排列的总数
    //     }  
         
    //     //所有的排列总数     
    //     for (index = 0; index < fac; index++) {  
    //         var t = index;  
    //         for (i = 1; i <= arr.length; i++) {  
    //             var w = t % i;  
    //             for (j = i - 1; j > w; j--){
    //             	result[j] = result[j - 1];
    //             }  
                      
    //             result[w] = arr[i - 1];  
    //             t = Math.floor(t / i);  
    //         }  
    //         show(result);  
    //     }  
    // }  
    // perm(["1", "2", "3", "4"]);
    
    
    
    
    // 对给定的字符集中的字符规定了一个先后关系，在此基础上规定两个全排列的先后是从左到右逐个比较对应的字符的先后
    // 算法二：循环，一组排列需要几个元素就用几个for
    // 0.4s
    // var str="1,2,3,4";
    // var strArray = str.split(",");  
    // var len = strArray.length;   //元素个数
    // var newArray = new Array();
    // for(var i=0;i<len;i++){
    //     for(var j=0;j<len;j++){
    //         if(j!=i){
    // 	        for(var k=0;k<len;k++){
    // 	            if(k!=i && k!=j){
    // 	            for(var l=0;l<len;l++){
    // 	                if(l!=i && l!=j && l!=k){
    // 	                	newArray.push( strArray[i]+" "+strArray[j]+" "+strArray[k]+" "+strArray[l] );
    // 	                }
    // 	            }
    // 	            }
    // 	        }
    //         }
    //     }
    // }
    // var len2=newArray.length;
    // console.log("排列方式种类有：" + len2 + " 种");
    // for(i=0;i<len2;i++){
    //     console.log(newArray[i]);
    // }
    
    
    
    // 算法三：链接算法（递归）------0.4s
    /*  
    全排列（递归链接）算法  
    1、设定源数组为输入数组，结果数组存放排列结果（初始化为空数组）；  
    2、逐一将源数组的每个元素链接到结果数组中（生成新数组对象）；  
    3、从原数组中删除被链接的元素（生成新数组对象）；  
    4、将新的源数组和结果数组作为参数递归调用步骤2、3，直到源数组为空，则输出一个排列。  
    */ 
    // var count=0;  
    // function show(arr) {  
    //     console.log("P<sub>"+ ++count+"</sub>: "+arr);  
    // }  
    // function perm(arr) {  
    //     (function fn(source, result) {  
    //         if (source.length == 0)  
    //             show(result);  
    //         else 
    //             for (var i = 0; i < source.length; i++)  
    //                 fn(source.slice(0, i).concat(source.slice(i + 1)), result.concat(source[i]));  
    //     })(arr, []);  
    // }  
    // perm(["1", "2", "3", "4"]); 
    
    
    
    
    
    // 算法四：交换算法（递归）-----0.7s
    /*  
    全排列（递归交换）算法  
    1、将第一个位置分别放置各个不同的元素；  
    2、对剩余的位置进行全排列（递归）；  
    3、递归出口为只对一个元素进行全排列  
    */ 
    // function swap(arr,i,j) {  
    //     if(i!=j) {  
    //         var temp=arr[i];  
    //         arr[i]=arr[j];  
    //         arr[j]=temp;  
    //     }  
    // } 
    
    // var count=0;  
    // function show(arr) {  
    //     console.log("P<sub>"+ ++count+"</sub>: "+arr);  
    // }  
    
    // function perm(arr) {  
    //     (function fn(n) { //为第n个位置选择元素  
    //         for(var i=n;i<arr.length;i++) {  
    //             swap(arr,i,n);  
    //             if(n+1<arr.length-1) //判断数组中剩余的待全排列的元素是否大于1个  
    //                 fn(n+1); //从第n+1个下标进行全排列  
    //             else 
    //                 show(arr); //显示一组结果  
    //             swap(arr,i,n);  
    //         }  
    //     })(0);  
    // }  
    // perm(["1","2","3","4"]);  
    
    
    
     // 算法五：回溯算法（非递归）---0.9s
    /*  
    全排列（非递归回溯）算法  
    1、建立位置数组，即对位置进行排列，排列成功后转换为元素的排列；  
    2、第n个位置搜索方式与八皇后问题类似。  
    */ 
    // var count = 0;  
    // function show(arr) {  
    //     console.log("P<sub>" + ++count + "</sub>: " + arr);  
    // }  
    // function seek(index, n) {  
    //     var flag = false, m = n; //flag为找到位置排列的标志，m保存正在搜索哪个位置  
    //     do {  
    //         index[n]++;  
    //         if (index[n] == index.length) //已无位置可用  
    //             index[n--] = -1; //重置当前位置，回退到上一个位置  
    //         else if (!(function () {  
    //             for (var i = 0; i < n; i++)  
    //                 if (index[i] == index[n]) return true;  
    //             return false;  
    //         })()) //该位置未被选择  
    //             if (m == n) //当前位置搜索完成  
    //                 flag = true;  
    //             else 
    //                 n++;  
    //     } while (!flag && n >= 0)  
    //     return flag;  
    // }  
    // function perm(arr) {  
    //     var index = new Array(arr.length);  
    //     for (var i = 0; i < index.length; i++)  
    //         index[i] = -1;  
    //     for (i = 0; i < index.length - 1; i++)  
    //         seek(index, i);  
    //     while (seek(index, index.length - 1)) {  
    //         var temp = [];  
    //         for (i = 0; i < index.length; i++)  
    //             temp.push(arr[index[i]]);  
    //         show(temp);  
    //     }  
    // }  
    // perm(["1", "2", "3", "4"]);
    
    
    
    // 算法六：排序算法（非递归）---0.9s
    /*  
    全排列（非递归求顺序）算法  
    1、建立位置数组，即对位置进行排列，排列成功后转换为元素的排列；  
    2、按如下算法求全排列：  
    设P是1～n(位置编号)的一个全排列：p = p1,p2...pn = p1,p2...pj-1,pj,pj+1...pk-1,pk,pk+1...pn  
    (1)从排列的尾部开始，找出第一个比右边位置编号小的索引j（j从首部开始计算），即j = max{i | pi < pi+1}  
    (2)在pj的右边的位置编号中，找出所有比pj大的位置编号中最小的位置编号的索引k，即 k = max{i | pi > pj}  
       pj右边的位置编号是从右至左递增的，因此k是所有大于pj的位置编号中索引最大的  
    (3)交换pj与pk  
    (4)再将pj+1...pk-1,pk,pk+1...pn翻转得到排列p' = p1,p2...pj-1,pj,pn...pk+1,pk,pk-1...pj+1  
    (5)p'便是排列p的下一个排列  
    例如：  
    24310是位置编号0～4的一个排列，求它下一个排列的步骤如下：  
    (1)从右至左找出排列中第一个比右边数字小的数字2；  
    (2)在该数字后的数字中找出比2大的数中最小的一个3；  
    (3)将2与3交换得到34210；  
    (4)将原来2（当前3）后面的所有数字翻转，即翻转4210，得30124；  
    (5)求得24310的下一个排列为30124。  
    */ 
    // var count = 0;  
    // function show(arr) {  
    //     console.log("P<sub>" + ++count + "</sub>: " + arr + "<br />");  
    // } 
    
    // function swap(arr, i, j) {  
    //     var t = arr[i];  
    //     arr[i] = arr[j];  
    //     arr[j] = t;  
    // }  
    
    // function sort(index) {  
    //     for (var j = index.length - 2; j >= 0 && index[j] > index[j + 1]; j--)  
    //         ; //本循环从位置数组的末尾开始，找到第一个左边小于右边的位置，即j  
    //     if (j < 0) return false; //已完成全部排列  
    //     for (var k = index.length - 1; index[k] < index[j]; k--)  
    //         ; //本循环从位置数组的末尾开始，找到比j位置大的位置中最小的，即k  
    //     swap(index, j, k);  
    //     for (j = j + 1, k = index.length - 1; j < k; j++, k--)  
    //         swap(index, j, k); //本循环翻转j+1到末尾的所有位置  
    //     return true;  
    // }  
    
    // function perm(arr) {  
    //     var index = new Array(arr.length);  
    //     for (var i = 0; i < index.length; i++)  
    //         index[i] = i;  
    //     do {  
    //         var temp = [];  
    //         for (i = 0; i < index.length; i++)  
    //             temp.push(arr[index[i]]);  
    //         show(temp);  
    //     } while (sort(index));  
    // }  
    // perm(["1", "2", "3", "4"]); 
    
    
    
    // 算法七：回溯算法（递归）----1s
    /*  
    全排列（递归回溯）算法  
    1、建立位置数组，即对位置进行排列，排列成功后转换为元素的排列；  
    2、建立递归函数，用来搜索第n个位置；  
    3、第n个位置搜索方式与八皇后问题类似。  
    */ 
    // var count = 0;  
    // function show(arr) {  
    //     console.log("P<sub>" + ++count + "</sub>: " + arr);  
    // } 
    
    // function seek(index, n) {  
    //     if (n >= 0) //判断是否已回溯到了第一个位置之前，即已经找到了所有位置排列  
    //         if (index[n] < index.length - 1) { //还有下一个位置可选  
    //             index[n]++; //选择下一个位置  
    //             if ((function () { //该匿名函数判断该位置是否已经被选择过  
    //                 for (var i = 0; i < n; i++)  
    //                     if (index[i] == index[n]) return true; //已选择  
    //                 return false; //未选择  
    //             })())  
    //                 return seek(index, n); //重新找位置  
    //             else 
    //                 return true; //找到  
    //         }  
    //         else { //当前无位置可选，进行递归回溯  
    //             index[n] = -1; //取消当前位置  
    //             if (seek(index, n - 1)) //继续找上一个位置  
    //                 return seek(index, n); //重新找当前位置  
    //             else 
    //                 return false; //已无位置可选  
    //         }  
    //     else 
    //         return false;  
    // }  
    // function perm(arr) {  
    //     var index = new Array(arr.length);  
    //     for (var i = 0; i < index.length; i++)  
    //         index[i] = -1; //初始化所有位置为-1，以便++后为0  
    //     for (i = 0; i < index.length - 1; i++)  
    //         seek(index, i); //先搜索前n-1个位置  
    //     while (seek(index, index.length - 1)) { //不断搜索第n个位置，即找到所有位置排列  
    //         var temp = [];  
    //         for (i = 0; i < index.length; i++) //将位置之转换为元素  
    //             temp.push(arr[index[i]]);  
    //         show(temp);  
    //     }  
    // }  
    // perm(["1", "2", "3", "4"]);

**9、HTML5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？**

1）新特性：HTML5 现在已经**不是 SGML 的子集**，主要是关于**图像，位置，存储，多任务**等**功能**的增加  
a）画布：canvas  
b）媒介标签：video 、 audio 元素  
c）本地离线存储 ：localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage 的数据在浏览器关闭后自动删除  
d）语意化更好的内容元素：nav，aside、header、 article、section、footer

e）表单控件，calendar、date、time、email、url、search  
f）新的技术webworker、websockt、 Geolocation  
  
2）移除的元素  
纯表现的元素：basefont，big，center，font, s，strike，tt，u  
对可用性产生负面影响的元素：frame，frameset，noframes  
  
3）处理浏览器不支持的HTML5新标签  
IE8/IE7/IE6支持通过**document.createElement**方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要**添加标签默认的样式**。  
  
当然最好的方式是直接使用成熟的框架、使用最多的是html5 shim框架

4）如何区分HTML和HTML5

通过DOCTYPE声明、新增的结构元素、功能元素

**65、HTML5新增的特性**

1）拖拽释放(Drag and drop) API，画布(Canvas) API，地理(Geolocation) API，音频、视频API(audio,video)

2）语义化更好的内容标签（header,nav,article,section，footer,aside,）

3）表单控件，calendar、date、time、email、url、search，number,week,month

4）本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失，sessionStorage 的数据在浏览器关闭后自动删除

5）新的技术webworker, websocket, Geolocation

**4、Doctype的作用？标准模式与兼容模式各有什么区别?**

<!DOCTYPE>document type文档类型声明，位于文档中的第一行，告诉**浏览器的解析器**用什么**文档标准**解析这个文档

**DOCTYPE不存在或格式不正确**会导致文档以**兼容模式**呈现

**标准模式的排版** 和**JS运作模式**都是以该**浏览器支持的最高标准运行**

**在兼容模式**中，页面以**宽松的向后兼容的方式**显示，**模拟老式浏览器的行为**以防止站点无法工作

**135、浏览器标准模式（Standards Mode）和怪异模式（Quirks Mode）的区别是什么**

**标准模式**页面会按照**HTML，CSS的定义渲染**，而在**怪异模式**就是**浏览器为了兼容**很早之前针对**旧版本浏览器设计**，**并未严格遵循W3C标准**而产生的一种**页面渲染模式**。浏览器基于页面中文件类型描述去渲染，如果存在一个**完整的DOCTYPE**则浏览器将会采用**标准模式**，如果**缺失**就会采用**怪异模式**

在**Netscape Navigator**和**Microsoft Internet Explorer**为数不多的浏览器盛行时，他们**对网页有不同的实现方式**，那个时候的网页都是针对这两个浏览器写的。随着各种浏览器的兴起，加上**Web标准的制定**，现在的浏览器不能继续使用以前的页面了，所以浏览器引入了**标准模式和怪异模式**来解决这一问题。

**标准模式**就是浏览器**按照Web标准来渲染页面**；为了解决**浏览器还是能使用以前写的页面，**所以怪异模式就产生了。怪异模式在不同的浏览器显示都是不一样的，因为他们都是按照自己的方式来渲染页面。

我们知道了标准模式和怪异模式，可是浏览器是怎么选择模式来渲染页面的呢？我们经常在页面的开头看到<!DOCTYPE>声明，这是告诉浏览器选择**哪个版本的HTML**，对于**渲染模式的选择**，浏览器是根据**DTD的声明**。如果网页中有DTD标准文档的声明，那浏览器会按照标准模式来渲染网页；如果网页**没有DTD声明或者HTML4以下的DTD声明**，那浏览器就按照自己的方式渲染页面，页面**进入怪异模式**

标准模式（w3c模式）和怪异模式（IE模式）之间的区别

1）盒子模型：在IE盒子模型中，height/width是由border+padding+width组成的；在w3c盒子模型下，height/width是指content的height/width

2）图片元素的对齐方式：对于**inline**元素和**table-cell**元素，**标准模式下vertical-align**属性默认取值为**baseline**，在**怪异模式**下，**table**单元格中的**图片**的**vertical-align**属性默认取值为**bottom**，因此在**图片底部会多出几像素的空间**

3）<table>元素中的字体：CSS中，对于**font的属性都是可以继承**的，**怪异模式**下，对于**table**元素，字体的某些元素将**不会**从body等其他封装元素中**继承**得到，特别是**font-size**属性

4）内联元素的尺寸：**标准模式**下， **inline**元素无法**自定义大小**，**怪异模式**下，定义这些元素的**width，height属性**可以**影响**这些元素**显示的尺寸**

5）元素溢出的处理：**标准模式**下，**overflow**默认值**visible**，在**怪异模式**下，该溢出会被当做**扩展box**来对待，即元素的大小由其内容决定，**溢出不会裁减，元素框自动调整**，**包含溢出内容**

**5、HTML5 为什么只需要写 <!DOCTYPE HTML>**

HTML5 不基于 SGML（其中，SGML---standard general markup  language是标准通用标记语言,简单的说，就是比HTML,XML更老的标准，这两者都是由SGML发展而来的），因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）  
而HTML4.01、XML基于SGML所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型

**6、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？**

CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素  
（1）行内元素有：<a>   <span>   <i>  <img> <strong>     <input>    
（2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p  
（3）常见的空元素：  
    <br> <hr> <img> <input> <link> <meta>  
    鲜为人知的是：  
    <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

**11、iframe有那些缺点？**

**1）**iframe会阻塞主页面的onload事件  
**2）**搜索引擎的**检索程序**无法**解读**这种页面，不利于SEO  
**3）**iframe和主页面**共享连接池**，而浏览器**对相同域的连接有限制**，所以会影响页面的**并行加载**

*  在相同域名下，内嵌的 IFrame 可以获取外层网页的对象
 *  在相同域名下，外层网页脚本可以获取 IFrame 网页内的对象
 *  可以通过脚本调整 IFrame 的大小
 *  通过IFrame，网页可以嵌入其他网页内容，并可以动态更改

**影响元素定位的属性有哪些？  float position  display**

**12、列出display的值，说明他们的作用？position的值， relative和absolute定位原点是？float**

**1）display的值**

block： 像块类型元素一样显示

none ：元素不显示，并且不占据页面空间

inline-block：像行内元素一样显示，但其**内容**像块类型元素一样显示

inline：像行内元素一样显示

table：像表格一样显示

flex：弹性布局

**2）position的值**  
absolute：绝对定位，相对于 static 以外的第一个父元素进行定位  
fixed （老IE不支持）：生成固定定位的元素，相对于浏览器窗口进行定位  
relative：生成相对定位的元素，相对于其在文档流中正常位置进行定位  
static： 默认值，没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）  
inherit ：规定从父元素继承 position 属性的值

sticky:

**13、一个满屏 品 字布局 如何设计**

需要用到技术  
1. 元素水平居中对齐  
1) 使用margin对齐(推荐)  
2) 使用left：50%

3) 使用text-align：行内元素居中对齐，给父元素设置text-align： center

2. 元素对相对窗口定位

1) 使用filxed（推荐）：总是根据浏览器的窗口来进行元素的定位

2) 使用absolute定位

3) 使用html和body的width和height填?这个窗口

3. 元素左右定位  
  
1) 使用float左右浮动  
  
2) 使用绝对定位进行左右定位（推荐）

**17、99%的网站都需要被重构是哪本书上写的？ **

网站重构：应用web标准进行设计（第2版）

18、如何设计突发大规模并发架构？

**19、说说最近最流行的一些东西吧？常去哪些网站？**

node.js    vue   react   mvvm   veex

CSDN   慕课网  牛客网    github    博客园   stackoverflow

20、介绍一个你最得意的作品吧？

21、你的优点是什么？缺点是什么？

22、如何管理前端团队?

23、最近在学什么？能谈谈你未来3，5年给自己的规划吗？

24、想问公司的问题？

**25、cssSprite是什么 ？有什么优缺点？雪碧图**

**1）css sprite（雪碧图）的定义**

CSS Sprites是一种**网页图片应用处理方式**，就是把网页中**一些背景图片**整合到**一张图片**文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位。

**2）优点**  
a)   减少网页的**http请求**，提高页面的加载速度  
b)  减少**图片的字节**：多张图片合并成1张图片的字节小于多张图片的字节总和  
c)  减少了**命名困扰**：只需对一张集合的图片命名，不需要对每一个小元素进行命名**提高制作效率**  
d)  **更换风格方便**：只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变，维护起来更加方便

**3）缺点**

**a) ** **在图片合并**的时候，需要把多张图片**有序的合理**的**合并成**一张图片，还要**留好足够的空间**，防止**板块内出现不必要的背景**；这些还好，最痛苦的是在宽屏，**高分辨率的屏幕**下的**自适应页面**，你的**图片如果不够宽**，很容易出现**背景断裂**  
**b)  背景设置时**，需要得到**每一个背景单元的精确位置**  
**c)  维护合成图片**时比较麻烦，如果页面背景有少许改动，一般**就要改这张合并的图片**，最好只是往下加图片，而不要更改已有图片

**26、0.1-0.2不等于0.3的原因？---计算机中精度受损问题**

JS中的数字采用IEEE754的双精度标准进行存储，小数位数只有17位，所有的**数值**在**计算机中**进行计算之前都会**转换成二进制**，这时候就有可能存在转化误差，即只要是小数，或者说是浮点数，就有可能会**出现精度受损的情况，**所以0.1-0.2得到的是一个近似值。

**26、CSS引入的方式有几种？  link和import的区别是什么？**

**css中的link和@import的区别**

1） link属于HTML标签，而@import是CSS提供的

2） 页面被加载的时候，link中的资源会同时被加载，而@import中的资源会等到引用它的CSS文件被加载完再加载

3） import只在IE5以上才能识别，而link是HTML标签，无兼容问题

4） link方式的样式的权重高于@import的权重.

css引入方式

外联样式：通过在<head>标签内添加<link href='xx.css'>引入

内联样式：通过在<head>标签添加<style>里面书写样式

行内样式：<p  style='color:red;background:rgba(22,22,22,0.1)'>

27、前端页面有哪三层构成？ 分别是什么？ 作用是什么？

1）前端页面分成3层：结构层（HTML,XHTML）、表示层（css）、行为层（javascript）

2）分别是什么，及其作用

**结构层**：由 HTML 或 XHTML 之类的标记语言负责创建。**标签**，也就是那些出现在尖括号里的单词，对**网页内容**的语义含义做出了**描述**，但这些标签不包含任何关于如何显示有关内容的信息

**表示层**：用css创建，规定如何显示内容

**行为层**：对事件作出反应

29、如何用CSS分别单独定义ie6 IE7 IE8 IE9 IE10的width属性

**31、谈谈以前端的角度出发做好seo需要做什么**

**对SEO优化的方法有哪些？**

**SEO（Search Engine Optimization）**，搜索引擎优化，是指为了增加网页在搜索引擎中自然搜索结果中的**收录数量**以及**提升排序位置**而做的**优化行为。**

SEO优化的方法不是一成不变的，但是仍有一些被人们公认的规律来对网站进行SEO优化。

从宏观的角度来说，SEO优化有三条最重要的规律：原创的内容、高质量的外部链接、持之以恒的适度的优化

**突出重要内容：**可以让搜索引擎判断当前页面的重点是什么

**提升网站访问速度：**可以让搜索引擎的蜘蛛顺利、快速、大量的抓取网页内容

一：突出重要内容

1）合理的title、description和keywords：在里面只写有用的东西，表达重点

title：只强调重点即可，重要关键词出现不要超过2次，而且要靠前，每个页面title要有所不同

description：把网页内容高度概括到这里，长度要合理，不可过分堆砌关键词，每个页面description要有所不同

keywords：列举出几个重要关键词即可，也不可过分堆砌

2）语义化书写HTML代码，符合W3C标准

如果代码写的语义化，搜索引擎就会很容易的读懂该网页要表达的意思。

例如文本模块要有大标题，合理利用h1-h6

列表形式的代码使用ul或ol

重要的文字使用strong

总之要充分利用各种HTML标签完成他们本职的工作，当然要兼容IE、火狐、Chrome等主流浏览器。

3）利用布局，把重要内容HTML代码放在最前面

搜索引擎抓取HTML内容是从上到下，利用这一特点，可以让主要代码优先读取，广告等不重要代码放在下边

4）重要内容不要用JS输出

蜘蛛不会读取JS里的内容，所以重要内容必须放在HTML里

5）尽少使用iframe框架

搜索引擎不会抓取到iframe里的内容，重要内容不要放在框架中

6）为图片加上alt属性

当网络速度很慢，或者图片地址失效的时候，就可以体现出alt属性的作用，他可以让用户在图片没有显示的时候知道这个图片的作用

7）需要强调的地方可以加上title属性

二：提升网站速度（加载优化的方法）

1）尽量外链CSS和JS，把内容、表现和行为分离开，保证网页代码的整洁，也有利于日后维护

2）CSS放在文件头部，JS放在文件尾部，可使用工具对CSS和JS文件进行压缩、合并

3）使用css雪碧图，将多张小图片合成一张大图片；使用本地缓存或者CDN

**33、移动端（Android IOS）怎么做好用户体验?**

1）多平台用户交互设计---清楚每个平台都有自己的**约定和标准，**设计方案使你的app**在每个平台**上都符合其**设计标准**

**其中需要注意**：不要**模拟**其他平台的**UI元素和字体**；不要**混淆**平台的**专属图标**；不要将**网页端的经验**复用到**app**上；

2）用户流（User Flow）---

**其中需要注意**：app里不应该出现**死路（**Dead-end）;不要**把用户带到浏览器**去----app缺少某个功能或信息，尝试使用app内浏览器，而不是唤起手机原生浏览器，否则你会打断用户的连续操作而无法回到app中，这样会提高跳出率；不要在用户**刚刚下载app后就评分**；

34、你在现在的团队处于什么样的角色，起到了什么明显的作用？

**35、你认为怎样才是全栈工程师（Full Stack developer）？**

掌握**多种技能**，并能利用多种技能**独立完成产品**的人，一位资深**开发工程师、架构师以及具有敏捷开发技能**的程序员，全栈工程师对于软件开发的认识往往已经进化了，他们把特定的技术抛到了身后，明白技术的更新始终比计算机理论要快的道理，因此，他们注重强化自身的核心技能，关注并乐于实践其他技术。全栈工程师往往是某一方面的专家，同时通晓并善于在正确的场合运用其他语言、工具和技术。

必须掌握如何使用Git来管理和分享你的代码；需要精通至少一门编程语言，JAVA 、PHP、C\#、Python、Ruby、Perl 等；流行的开发语言；前端技术的实现，至少需要掌握 HTML5、CSS3、JavaScript 等基本前端技术，同时进一步学习 JQuery、LESS、SASS、AngularJS或REACT等前端框架或第三方库；数据库与缓存；基本的设计能力

软实力：沟通；问题解决能力；时间管理；好奇心；领导力

**36、css基本语句的构成**

选择符{
          属性名：属性值
    }

**39、哪些浏览器支持html5？**

1、IE----  IE9支持部分；  IE10+支持全部  
2、Firefox----  Firefox3.5，3.6支持大部分；  Firefox4.0+支持全部  
3、Chrome----  Chrome3-5支持大部分；  Chrome6+支持全部  
4、Opera----  Opera10.5支持大部分；  Opera10.6支持全部  
5、Safari---- Safari3.1+支持大部分  
6、Konqueror4.4+支持大部分  
7、iPhone3+自带浏览器支持大部分  
8、iPad3.2+自带浏览器支持大部分  
9、Anroid2.1+自带浏览器支持大部分

**40、css 中，使用的列布局是什么？ 为了实现列布局我们需要指定哪些内容？**

css3中的列布局：就是**创建多个列**来**对文本进行布局**，

**column-count** 属性规定元素应该被分隔的**列数**

**column-width** 列的宽度

**columns**：column-width  column-count的简写

**column-gap** 属性规定列之间的**间隔**

**column-rule** （column-rule-color   column-rule-width   column-rule-style）属性设置列之间的**宽度、样式和颜色**规则

**column-span** 元素应该横跨的列数

**41、css3中，transition和animation的区别？如何书写animation**

transition： 强调过渡；   
**需要触发一个事件**，比如鼠标移上去、焦点、点击

**animation：多个关键帧，实现自由动画，**通过@keyframes控制当前帧属性，更灵活；   
**不需要触发任何事件，**也可随时间变化达到一种动画效果；

**41、用js实现动画**

通过改变元素的top  left  rigth  bottom值，然后调用setInterval()  或者setTimeout()来实现动画效果

**51、HTML中div与span区别**

**1） div**是**块级元素**， 实际上就是一个**容器**， 主要用于**容纳其他标签，** 默认的**display**属性是**block  
2）span**是**行内元素**， 主要用于**容纳文字**， 默认的**display**属性是**inline**

**53、css实现垂直水平居中（口语描述）**

**1）定位实现**：父元素设置除了static之外的任何position值  width/height；子元素设置position:absolute   top/right/bottom/left:0  margin:auto    width/height

<!DOCTYPE html>
    <html lang="zh">
    
        <head>
            <meta charset="UTF-8" />
            <title>CSS水平垂直居中实现方式--定位实现</title>
            <style type="text/css">
                *{
                    margin: 0;
                    padding: 0;    
                }
                .p{
                    /*父元素为除了static以外的定位方式*/
                    position: relative;
                    /*position: absolute;*/
                    /*position: fixed;*/
                    width: 500px;
                    height: 500px;
                    border: 1px solid red;
                }
                .c{
                    /*子元素为绝对定位*/
                    position: absolute;
                    width: 200px;
                    height: 200px;
                    /*top、bottom、left和right 均设置为0*/
                    top: 0;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    /*margin设置为auto*/
                    margin:auto;
                    border: 1px solid green;    
                }
            </style>
        </head>
    
        <body>
            <div class="p">
                <div class="c">
                    子元素
                </div>
            </div>
            
        </body>
    
    </html>

**2）table-cell布局：**父元素设置display:table-cell    vertical-align:middle(垂直居中)   width/height     子元素设置margin:0 auto(水平居中) width/height

<!DOCTYPE html>
    <html lang="zh">
        <head>
            <meta charset="UTF-8" />
            <title>CSS水平垂直居中实现方式--定位实现</title>
            <style type="text/css">
                *{
                    margin: 0;
                    padding: 0;    
                }
                .p{
                    width: 500px;
                    height: 500px;
                    border: 1px solid red;
                    display: table-cell;
                    /*vertical-align: middle; 实现垂直居中*/
                    vertical-align: middle;
                }
                .c{
                    width: 200px;
                    height: 200px;
                    border: 1px solid green;
                    /*margin: 0 auto; 实现水平居中*/
                    margin: 0 auto;    
                }
            </style>
        </head>
        <body>
            <div class="p">
                <div class="c">
                    子元素
                </div>
            </div>
            
        </body>
    
    </html>

**3）flex布局**：有浏览器兼容问题，父元素设置display:flex   align-items:center(垂直居中)    justify-content:center(水平居中)  width/height

子元素设置width/height

<!DOCTYPE html>
    <html lang="zh">
    
        <head>
            <meta charset="UTF-8" />
            <title>CSS水平垂直居中实现方式--定位实现</title>
            <style type="text/css">
                * {
                    margin: 0;
                    padding: 0;
                }
                
                .p {
                    width: 500px;
                    height: 500px;
                    border: 1px solid red;
                    /*flex 布局*/
                    display: flex;
                    /*实现垂直居中*/
                    align-items: center;
                    /*实现水平居中*/
                    justify-content: center;
                }
                
                .c {
                    width: 200px;
                    height: 200px;
                    border: 1px solid green;
                }
            </style>
        </head>
    
        <body>
            <div class="p">
                <div class="c">
                    子元素
                </div>
            </div>
    
        </body>
    
    </html>

**4）translate+relative定位**：有浏览器兼容问题，父级设置width/height     子元素设置position:relative   top:50%   left:50% transform:translate(-50%,-50%)   width/height

<!DOCTYPE html>
    <html lang="zh">
    
        <head>
            <meta charset="UTF-8" />
            <title>CSS水平垂直居中实现方式--定位实现</title>
            <style type="text/css">
                * {
                    margin: 0;
                    padding: 0;
                }
                
                .p {
                    width: 500px;
                    height: 500px;
                    border: 1px solid red;
                }
                
                .c {
                    width: 200px;
                    height: 200px;
                    border: 1px solid green;
                    /*relative 定位*/
                    position: relative;
                    /*top和left偏移各为50%*/
                    top: 50%;
                    left: 50%;
                    /*translate(-50%,-50%) 偏移自身的宽和高的-50%*/
                    transform: translate(-50%, -50%);
                }
            </style>
        </head>
    
        <body>
            <div class="p">
                <div class="c">
                    子元素
                </div>
            </div>
    
        </body>
    
    </html>

**55、两列布局，左边定宽100px，右边自适应**

1）使用flex布局，父容器设置display:flex，左边div设置flex:0 0  100px   width:100px   height:100px；右边div设置：flex：1   height:100px

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                .container{
                    background:red;
                    display: flex;
                    -webkit-display:flex;
                }
    
                .d1{
                    background:rgba(2,55,66,0.5);
                    flex: 0 0 100px;
                    width:100px;
                    height:100px;
                }
    
                .d2{
                    background: rgba(55,44,33,0.5);
                    flex:1;
                    height:100px;
                }
            </style>
        </head>
        <body>
            <div id='container' class="container">
                <div id='d1' class="d1"></div>
                <div id='d2' class="d2"></div>
            </div>
           
        </body>
    </html>

![70][]

2）**左侧宽度固定，右侧宽度自适应两列布局：**利用**左侧元素浮动，或者绝对定位的方式**使其**脱离常规文档流**，让两个块级元素能够在同一行显示，**右侧元素 margin-left 的值**等于**左侧元素宽度**，这时**右侧元素将紧挨着左侧元素**，由于**块元素的宽度会自动默认充满剩下的屏幕**，所以就实现了**右侧自适应的效果**了

左侧：position:absolute;  width:100px;  height:300px;

右侧：margin-left:100px; height:200px;

<!DOCTYPE>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="test.css" type="text/css">
        <style>
           
            .one {
                position: absolute;   /*或者float:left*/
                height: 100px;
                width: 300px;
                background-color: blue;
            }
            .two {
                height: 200px;
                margin-left: 300px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="one"></div>
        <div class="two">第一种方法</div>
    </body>
    </html>

![70 1][]

3）创建BFC---给左边元素设置BFC，float:left,width:100px，右边div设置overflow:auto/hidden

效果同2)

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                .one {
                    float: left;
                    height: 100px;
                    width: 300px;
                    background-color: blue;
                }
                .two {
                    overflow: auto;  /*overfloe:hidden*/
                    height: 200px;
                    background-color: red;
                }
            </style>
        </head>
        <body>
            <div class="one"></div>
            <div class="two">第二种方法</div>
        </body>
    </html>

**55、实现三栏布局（左右两边固定宽度，中间自适应）**

1）flex布局：父元素设置display:flex；左右两边分别设置flex:0 0 100px；width:100px;中间栏设置flex:1;

2）浮动布局：左右两边分别设置固定宽度，分别设置float:left    float:right，在HTML中需要将中间栏和右边栏进行对调

3）绝对定位布局：左右两边设置宽度固定，position:absolute,top:0，然后分别设置：left:0   right:0；中间栏只需要设置margin-left  margin-right分别为左右栏的宽度就可以了

**55、列举5种以上表单元素中input的type类型**

<input type="text"> 定义供文本输入的单行输入字段
    <input type="password"> 定义密码字段
    <input type="submit"> 定义提交表单数据至表单处理程序的按钮
    <input type="radio"> 定义单选按钮
    <input type="checkbox"> 定义复选框
    <input type="button> 定义按钮
    
    HTML5中新加的类型
    color     <input type="color"> 用于应该包含颜色的输入字段
    date      <input type="date"> 用于应该包含日期的输入字段
    datetime  <input type="datetime"> 允许用户选择日期和时间（有时区）
    datetime-local  <input type="datetime-local"> 允许用户选择日期和时间（无时区）
    month     <input type="month"> 允许用户选择月份和年份
    week      <input type="week"> 允许用户选择周和年
    time      <input type="time"> 允许用户选择时间（无时区）
    number    <input type="number" name="quantity" min="1" max="5">
    range     <input type="range" name="points" min="0" max="10">用于应该包含一定范围内的值的输入字段
    search    <input type="search"> 用于搜索字段（搜索字段的表现类似常规文本字段）
    tel
    email     <input type="email"> 用于应该包含电子邮件地址的输入字段
    url       <input type="url"> 用于应该包含 URL 地址的输入字段

**59、经常使用的页面开发工具和测试工具**

页面开发工具：sublime 、 webstorm 、 vs code

**60、经常使用什么脚本库，开发或使用什么应用或组件**

经常使用的脚本库：jQuery    Bootstrap.js   Vue.js

**61、使用css如何让一个宽度为200px的div水平居中，（要求兼容ie，可提供多种方法）**

1)：给div设置width:200px  margin:0 auto

2）：给父div设置：display:flex;  justify-content:center;       子div设置：width

**62、简要画出盒模型，并描述关键要素的含义**

盒模型由：外边距（margin）、边框（border）、内边距（padding）、内容（content）组成

元素框的**最内部分**是**实际的内容；**直接包围内容的是**内边距**；**内边距的边缘**是边框；**边框以外**是外边距（外边距默认是**透明**的，因此不会遮挡其后的任何元素）

**提示**：在IE/Chrom下，**background-color**应用于content+padding，在firefox下由**内容和内边距、边框**组成的区域。只有**普通文档流中块框的垂直外边距**才会发生**外边距合并（取大者）**。行内框、浮动框或绝对定位之间的外边距不会合并

内边距、边框和外边距都是可选的，**默认值是零**

**增加**内边距、边框和外边距不会影响**内容区域**的尺寸，但是会增加**元素框的总尺寸。**

**在w3c盒子模型中：content-box，**设置的width/height是指content的height和width，元素框的大小 =  margin +border + padding + content

**在IE盒子模型中**：**border-box**，设置的width/height是指content+padding+border之和，元素框的大小 = margin + width/height

**box-sizing：content-box | border-box | inherit**

1）content-box:默认值，使设置的宽度和高度值应用到元素的内容框，盒子（元素框）总宽度=margin+border+padding+width

2）border-box：设置的width值其实是除margin外的border+padding+element的总宽度。盒子的width包含border+padding+内容

盒子总宽度=margin+width 。

优点：当设置padding/border的值得时候，使其不会撑破盒子的大小

3）inherit：规定从父元素继承 box-sizing 属性的值

**61、box-sizing的属性**

box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box。

content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高。

border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content

标准浏览器下，按照W3C规范对盒模型解析，一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局

有时候content-box看起来比border-box更加合理，但还是会使用box-border?

比如有时候，在元素基础上添加内距padding或border会将布局撑破，但是使用border-box就可以轻松完成

**3、介绍一下CSS的盒子模型？弹性盒子模型是什么？**

盒子模型分为IE盒子和W3c盒子两种  
W3C盒子（标准盒子模型）由margin，border，padding，content，设置的width  height是针对content的  
IE盒子（怪异盒子模型）由margin，border，padding，content构成，但是设置的width   height是包括border+padding+content

弹性盒子模型：弹性盒模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间；可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局

盒模型是CSS的基石之一，它指定元素如何显示以及如何相互交互。页面上的每个元素被看做一个矩形框，这个框由元素的内容、内边距、边框和外边距组成

![70 2][]

**哪些元素会自动设置为怪异盒模型，如何设置为怪异盒模型**

如果在.html页面中缺少<!doctype>声明的话，就会触发怪异盒子模型

设置怪异盒子模型：通过box-sizing:border-box来设置怪异盒子模型

**76、对WEB标准以及W3C的理解与认识**

**1）web标准**：Web标准是由万维网联盟（W3C）制订的，简单来说可以分为**结构、表现和行为**。其中结构主要是有HTML标签组成。或许通俗点说，在页面body里面我们写入的标签都是为了页面的结构。表现即指css样式表，通过css可以是页面的结构标签更具美感。行为是指页面和用户具有一定的交互，同时页面结构或者表现发生变化，主要是有js组成。web标准**一般**是将该三部分独立分开，使其更具有**模块化**。但一般**产生行为**时，就会有**结构或者表现的变化**，也使这三者的界限并不那么清晰。

**2）W3C对web标准提出了规范化的要求**，也就是在实际编程中的一些代码规范：包含如下几点  
  
A、元素语法：（标签规范可以提高搜索引擎对页面的抓取效率，对SEO很有帮助）  
标签字母要小写  
标签要闭合  
标签不允许随意嵌套

特殊符号用编码表示，<(<)

B、属性语法

属性值必须加引号

属性值小写

属性值不能用简写方式

B、对于css和js来说  
尽量使用外链css样式表和js脚本，使结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验  
样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版  
不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。

**7、介绍一下你对浏览器内核的理解**

浏览器内核主要分成两部分：**渲染引擎**(layout engineer或Rendering Engine)和**JS引擎**

**渲染引擎**：决定了浏览器**如何加载和显示网页的内容以及信息**。负责**取得网页的内容**（HTML、XML、图像等等）、**整理讯息**（例如加入CSS等），以及**计算网页的显示方式**，然后会**输出至显示器或打印机**。**浏览器的内核**的不同对于**网页的语法解释**会有不同，所以**渲染的效果**也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核

**JS引擎**：则**解析和执行**javascript来实现**网页的动态效果**

最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎

**8、常见的浏览器内核有哪些**

IE：trident内核（IE内核）

Chrome：Blink内核，Google和Opera Software共同研发

360浏览器： 兼容模式（trident内核）、极速模式（Blink内核）

FireFox：gecko内核，Mozilla自己开发的一套开放源代码、以C++编写的渲染引擎

Safari：webkit内核，开源的浏览器引擎，源自于Linux平台上的一个引擎，经过Apple公司的修改可以支持Mac与Windows平台

Opera：以前是presto内核，现在改为Blink内核

**41、描述css reset的作用和用途？**

重置浏览器默认的css样式，不同的浏览器有自己的默认样式，我们需要设置在不同的浏览器下有相同的样式，避免写的网页在各个浏览器中有显示差异。

[http://cssreset.com/][http_cssreset.com]，该网站有最流行的CSS重置样式表，可以根据自己的需求复制

[http://necolas.github.io/normalize.css/][http_necolas.github.io_normalize.css]，该网站提供了normalize.css的样式文件（好像国内有被墙了，只能FQ了）

**10、简述一下你对HTML语义化的理解**

**HTML语义化**：就是**页面去掉样式**或者**加载失败**的时候能够让**页面呈现出清晰的结构**。HTML5新增了好多语义化的标签，例如：header、footer、nav、menu、section、article等等，单单从字面上理解，就知道标签的含义。在写页面的时候，我们可以直接引用这些标签，不需要再用**没有任何含义的div标签**了，对于机器可以识别，对于开发人员很容易明白。这就是HTML语义化。

**语义化的好处：**

**1）**为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构  
**2）**用户体验：例如title、alt用于解释名词  
**3）**有利于SEO：利于被搜索引擎收录，更便于搜索引擎的爬虫程序来识别  
**4）**方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页  
**5）**便于项目的开发及维护，使HTML代码更具有可读性

**63、前端页面构造中你遇到过什么样的兼容问题，如何解决（常见的兼容性问题）**

1）不同浏览器默认的margin和padding不同

//设置统一格式
    *{margin：0；padding：0} 统一格式

2）ie6中，子元素设置浮动以后，内部元素内容撑不开父元素的高度

//解决方法
    父元素内部的块级元素也设置浮动

3）ie6中元素宽高小于19px，会当成19px处理

//解决方法
    设置overflow:hidden;

4）IE8及以下版本的浏览器不支持opacity，解决方法添加IE滤镜alpha()

Opacity:0.8;
    
    filter:alpha(opacity=80);
    
    -ms-filter:”progid:DXImageTransform.Microsoft.Alpha(opacity=80)”;

5）在IE6和IE7下父级有边框的时候，子元素的margin会失效

//解决方法
    父级元素设置zoom：1；

6）浮动后的元素，在ie6即以下版本出现横向的双边距bug

任何浮动元素的外边距加倍，如元素设置margin-left:15px，在浏览器下显示margin-left:30px

//解决方法
    给元素添加display：inline；

7）3px问题

在IE6及以下版本的IE中，两个相邻的div之间有3px间隙，一个div使用float，另一个没有使用

**解决方法**：给浮动元素设置IE6的hack，即在margin\_right前面添加下划线，\_margin-right:-3px

7）在IE6,7下，li本身没有浮动，li里面的元素有浮动，li下出现间隙的问题

//解决方法
    常规下给li加vertical-align:top 如果最下间隙和最小高度bug共存的时候，利用hack给li添加浮动

8）在IE6下，当浮动元素和绝对定位元素是兄弟关系的时候，绝对定位会失效

//解决方法
    不让浮动元素和绝对定位元素是兄弟关系，用div或者其他标签把子标签包起来

9）在IE6.7下，子级元素有相对定位，父级overflow包不住子级元素

//解决方法
    给父级也加相对定位

10）在IE6下，如果绝对定位的父级宽高是奇数的时候，子级元素的right和bottom值会有1px的偏差

//解决方法
    尽量将父级宽高设置非奇数

11）在IE6.7下 输入型的表单标签控件上下会有1px的间隙

//解决方法
    给input加浮动

12）图片布局的问题，在布局的时候有的浏览器会出现间距

//解决方法
    使用 float浮动

**67、什么是css预处理器**

CSS 预处理器**定义**了一种**新的语言**，其基本思想是，用一种**专门的编程语言**，为 CSS 增加了一些**编程的特性**，将 **CSS** 作为**目标生成文件**，然后开发者就只要使用这种语言进行web页面样式设计

通俗的说，“CSS 预处理器用一种**专门的编程语言**，进行 **Web 页面样式设计**，然后再**编译成正常的 CSS 文件**，以供项目使用。CSS 预处理器为 **CSS 增加一些编程的特性**，**无需**考虑**浏览器的兼容性**问题”

例如你可以在 CSS 中使用变量、简单的逻辑程序、函数

**67、预处理语言是在什么地方起作用（**预处理语言是在浏览器直接起作用么？**）**

预处理语言可以运行在Node或者浏览器端

比如less:

**在客户端的使用：**是先引入源文件，在引入less.js文件；

**在服务器端的使用：**主要是借助于 **LESS 的编译器**，将 LESS 源文件**编译**生成最终的 CSS 文件，目前常用的方式是利用 node 的包管理器 (npm) 安装 LESS，安装成功后就可以在 **node 环境中对 LESS 源文件进行编译**

**71、请描述你曾使用过的css预处理器的优缺点**

主要从基本语法、变量、嵌套、混入(mixin)，继承，函数，@import，运算符，逻辑控制等方面描述

1）基本语法：

**LESS**的基本语法和**CSS**差不多，**SASS（**Sass依赖Ruby，安装SASS前要安装Ruby**）**和**Stylus**都可以利用**缩进代替花括号**，并且**空格有重要的意义**。**SASS**保存为".sass"是**缩进格式**，保存为".**scss**"是**非缩进格式**。**SASS**一般使用".**scss**"扩展名。**LESS**的扩展名为".**less**"，**Stylus**的扩展名为".**styl**"

2）变量：CSS预处理器中可以定义变量，并且可以在样式表中使用，变量类型没有限制，这样就可以一定程度上减少CSS中无法避免的重复问题

**LESS**变量名必须以**@**符号开头，变量名和变量值之间以**冒号隔开**。有个问题是@规则在CSS中算是一种原生的扩展方式，变量名用@开头很可能会和以后CSS中的新@规则冲突

@orange: #feb914；
    header {
        background-color: @orange;
    }

**SASS**变量名必须以**$**开始，变量名和变量值之间以**冒号隔开**

$orange: #feb914；
    header {
        background-color: $orange;
    }

**Stylus**对变量名**没有任何限定**，变量名与变量值之间可以用**冒号、空格和等号**隔开

变量作用域：变量都是有作用域的，查找变量的顺序是先在局部定义中查找，如果找不到，则逐级向上查找。Stylus和SASS行为相同，变量的计算**以变量最近一次的定义为准**。Less以这个变量**最后一次的定义的值为准**

//less
    @size: 40px;
    .content {
        width: @size;
    }
    @size: 60px;
    .container {
        width: @size;
    }
    
    //编译输出
    .content {
        width: 60px;
    }
    .container {
        width: 60px;
    }
    
    //sass
    $size: 40px;
    .content {
        width: $size;
    }
    //编译输出
    $size: 60px;
    .container {
        width: $size;
    }
    
    .content {
        width: 40px;
    }
    .container {
        width: 60px;
    }

变量插值：预处理器中**定义的变量**不仅可以用作**属性值**，还可以用作**选择器**，**属性名**等，这就是变量插值

变量名插值：**Less**中支持以**@@var**的形式引用变量，即**该变量的名字**是由**@var的值**决定的

选择器插值：

//以类选择器为例
    //less，在Less中，通过选择器插值生成的规则无法被继承。
    @way: new;
    .@{way}-task {
        font-size: 18px;
    }
    
    //sass插值
    $way: new;
    .#{$way}-task {
        font-size: 18px;
    }
    
    //stylus
    way: new;
    .{way}-task
        font-size 18px
    
    //输出结果都是下面的形式
    .new-task {
        font-size: 18px;
    }

@import插值

//Sass中只能在使用url()表达式时进行变量@import插值
    $device: mobile;
    @import url(styles.#{$device}.css);
    
    //Less中可以在字符串中进行插值：
    @device: mobile;
    @import "styles.@{device}.css";
    
    //Stylus中没有@import插值，但是可以利用其字符串拼接的功能实现
    device = "mobile"
    @import "styles." + device + ".css"

属性名插值：三个预处理器均支持属性名插值，使用方式且和上述插值类似

3）嵌套：在**相同的父元素**中选择**多个子元素**，需要一遍又一遍地写父元素，如果用**CSS预处理器**就可以不用重复写父元素，并且**父元素和子元素**的关系一目了然

三种预处理器的**嵌套语法是一致**的，**引用父级选择器**的标记**&**也相同。除了&，Sass和Stylus还分别用**@at-root和"/"**符号作为嵌套时**根规则集的选择器引用**

4）混入（mixin）：当**某段CSS**经常需要在**多个元素**中使用时，可以为这些**共用的CSS**定义一个mixin，然后只需要在需要引用这些CSS地方调用该mixin即可。三种预处理器的mixin使用方式的差异比较大

待续。。。。

**69、document.write、innerHTML和innerText 的区别？**

1）document.write()：该方法可以向文档写入HTML表达式或js代码。在页面onload之前使用，事件驱动的document.write方法会出现将原网页内容覆盖等问题

2）DOM对象的innerHTML属性：设置或返回标签中的开始和结束标签之间的 **HTML**

3）DOM对象的innerText属性 ：设置或返回标签中的开始和结束标签之间的**文本**

**获取值的时候**：取值时 innerText会把只会**获取节点里面的文本信息**，而innerHTML 会**获取节点下面的所有标签**

**设置值的时候**： innerText会把**html**标签当做**普通的文本显示**，而innerHTML 则不会

**70、js中innerText、innerHTML、outerHTML、outerText、value的区别**

1）innerHTML（不包括自身）：**在读模式下**，innerHTML 属性返回与调用元素的**所有子节点**（包括元素、注释和文本节点）**对应的 HTML 标记**。在**写模式**下，innerHTML 会**根据指定的值创建新的 DOM 树**，然后用这个 DOM 树**完全替换调用元素**原先的**所有子节点**

<!DOCTYPE html>
    <html lang="zh">
    
        <head>
            <meta charset="UTF-8" />
            <title>CSS水平垂直居中实现方式--定位实现</title>
        </head>
    
        <body> 
            <div class="nav">
                <div class="dd">dd</div>
                
                <p>FFFF</p>
            </div>
    
            <script type="text/javascript">
            console.log(document.querySelector('.nav').innerHTML)
                            
            </script>
        </body>
    
    </html>

**读模式，返回所有子节点（**元素，文本节点，注释节点**）对应的HTML标记，其中会有一个空行，那是空行被当成文本节点，所以会显示**

**![70 3][]**

//在上面的基础，改成写模式
    document.querySelector('.nav').innerHTML='<p>ppp</p>';

**写模式，替换调用元素的所有子节点，如果内容有HTML标签，则会解析该标签，在网页上不回显示该HTML标签**

![70 4][]

2）innerText：可以操作**元素中包含的所有文本内容**，包括**子文档树中的文本**。**在读模式下**，它会按照**由浅入深**的顺序，将**子文档树**中的**所有文本拼接起来**。在**写模式**下，会**删除元素的所有子节点**，**插入**包含相应文本值的**文本节点**

**读模式**，按照**由浅入深，**显示**子文档中所有的文本**（不包括注释节点和空行）

console.log(document.querySelector('.nav').innerText)

![70 5][]

**写模式**，删除元素所有的子节点，**插入文本节点**（如果有HTML标签，则不会解析，将会显示出HTML标签）

document.querySelector('.nav').innerText = '<p>kkk</p>'

![70 6][]

3）outerHTML（包括自身）：在**读模式**下，outerHTML 返回**调用它的元素及所有子节点的 HTML 标签**。在**写模式**下，outerHTML 会根据指定的 HTML 字符串创建新的 DOM 子树**完全替换调用元素**

**读模式**，返回**自身**及其**子节点标签**（包括注释节点）

console.log(document.querySelector('.nav').outerHTML)

![70 7][]

**写模式**，将自身和子节点全部替换掉（会解析字符串里面的HTML标签）

document.querySelector('.nav').outerHTML = '<p>ddd</p>'

![70 8][]

4）outerText： 可以操作**元素中包含的所有文本内容**，包括子文档树中的文本。在**读模式**下，它会按照**由浅入深**的顺序，将**子文档树**中的所有文本拼接起来。在**写模式**下，结果**会删除元素的所有子节点**，插入包含相应文本值的**文本节点**

**读模式**，显示子节点文本（不包括注释节点和空节点）

console.log(document.querySelector('.nav').outerText )

![70 9][]

**写模式**，将**自身和子节点**都删掉，插入文本节点，**不会解析**字符串里面的**HTML标签**

document.querySelector('.nav').outerText = "<p>lll</p>"

![70 10][]

5）value： 用于获取表单元素的值，其他的都返回undefined

70、jQuery中的text()   val()    html()的区别

1）无参text()：获取所选元素（除了表单元素）的文本内容（字符串）

有参text(val)：设置所选元素（除了表单元素）的文本内容（字符串）

2）无参html()：获取所选元素（除了表单元素）的内容（包括html标签）

有参text(val)：设置所选元素（除了表单元素）的内容（字符串）

3）无参val()：获取所选表单元素的值

有参val(str)：设置所选表单元素的内容（字符串）

**70、请说出至少三种减少页面加载时间的方法（加载时间是指感知的时间或者实际加载 的时间）**

1）尽量减少页面中重复的HTTP请求数量（图片使用雪碧图，浏览器缓存，CDN）
    2）压缩合并Javascript、CSS代码，服务器开启gzip压缩
    3） css样式的定义放置在文件头部，Javascript脚本放在文件末尾
    4）使用多域名负载网页内的多个文件、图片

**72、实现 class为test的div 在屏幕宽为400px以下的宽度为200px，屏幕宽为400~800px的情况下宽 度为350px**

@media screen and (max-width:400px){
      .test{
          width:400px;
       }
    }
    @media screen and (min-width:400px) and (max-width:800px){
      .test{
          width:350px
       }
    }

**73、实现当屏幕宽度大于700px，小于800px时引用外部样式style-7-9.css**

@media screen and (min-width:700px) and (max-width:800px){
       @import 'style-7-9.css'
    }
    //下面3种方法都有效
    @import url("global.css");
    @import url(global.css);
    @import "global.css";
    
    //指定媒体查询
    @import url(example.css) screen and (min-width:800px);
    @import url(example.css) screen and (width:800px),(color);
    @import url(example.css) screen and (min-device-width:500px) and (max-device-width:1024px);

**88、清除浮动的几种方式，各自的优缺点**

为什么需要清除浮动？

浮动会使**当前标签**产生**向上浮**的效果，同时会影响到**前后标签**、**父级标签的位置**及 **width height** 属性。而且同样的代码，在各种浏览器中**显示效果**也有**可能不相同**

清除浮动的几种方式

1）给设置浮动元素的父级div设置height

原理：父级div手动定义height，就解决了父级div**无法自动获取到高度的问题**  
优点：简单，代码少，容易掌握  
缺点：只适合**浮动子元素高度固定的布局**，要给出精确的高度，如果**子元素高度和父级div**不一样时，会**产生问题**  
建议：不推荐使用，**只建议高度固定的布局**时**使用**  
评分：★★☆☆☆

<!DOCTYPE html>
    <html lang="zh">
    
        <head>
            <meta charset="UTF-8" />
            <title>CSS水平垂直居中实现方式--定位实现</title>
            <style type="text/css"> 
    		   .div1{background:#000080;border:1px solid red;/*解决代码*/height:200px;}
    		   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}	   
    		   .left{float:left;width:20%;height:200px;background:#DDD}
    		   .right{float:right;width:30%;height:80px;background:#DDD}
    	    </style> 
        </head>
        <body> 
    		<div class="div1"> 
    			<div class="left">Left</div> 
    			<div class="right">Right</div> 
    		</div>
    		<div class="div2">
    		   div2
    	    </div>
        </body>
    </html>

![70 11][]

2）在浮动元素的后面加空div标签，设置clear:both

原理：在**浮动元素的后面**添加一个**空div**，设置**clear:both清除浮动**，让父级div能自动获取到高度  
优点：简单，代码少，容易掌握，浏览器支持好，不容易出现怪问题  
缺点：如果**页面浮动布局多**，就要**增加很多空div**，会产生很多无意义的标签  
建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法  
评分：★★★☆☆

<!DOCTYPE html>
    <html lang="zh">
    
        <head>
            <meta charset="UTF-8" />
            <title>CSS水平垂直居中实现方式--定位实现</title>
            <style type="text/css"> 
    		   .div1{background:#000080;border:1px solid red;}
    		   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}	   
    		   .left{float:left;width:20%;height:200px;background:#DDD}
    		   .right{float:right;width:30%;height:80px;background:#DDD}
    		      /*清除浮动代码*/
       		   .clearfloat{clear:both}
    	    </style> 
        </head>
        <body> 
    		<div class="div1"> 
    			<div class="left">Left</div> 
    			<div class="right">Right</div> 
    			
    			<div class="clearfloat"></div>
    		</div>
    		<div class="div2">
    		   div2
    	    </div>
        </body>
    </html>

显示效果同上

3）父级div定义伪类:after和zoom：1

*  原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题
 *  优点：浏览器支持好，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
 *  缺点：代码多，不少初学者不理解原理，要两句代码结合使用，才能让主流浏览器都支持
 *  建议：推荐使用，建议定义公共类，以减少CSS代码
 *  评分：★★★★☆

<!DOCTYPE html>
    <html lang="zh">
    
        <head>
            <meta charset="UTF-8" />
            <title>CSS水平垂直居中实现方式--定位实现</title>
            <style type="text/css"> 
    		   .div1{background:#000080;border:1px solid red;}
    		   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}	   
    		   .left{float:left;width:20%;height:200px;background:#DDD}
    		   .right{float:right;width:30%;height:80px;background:#DDD}
    		     /*清除浮动代码*/ 
    		   .clearfloat{zoom:1}
    		   .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
    		  
    	    </style> 
        </head>
        <body> 
    		<div class="div1 clearfloat"> 
    			<div class="left">Left</div> 
    			<div class="right">Right</div> 
    		</div>
    		<div class="div2">
    		   div2
    	    </div>
        </body>
    </html>

显示效果同上

4）父级div定义overflow:hidden

原理：**父级元素**必须定义**width或zoom:1**，同时**不能定义height**，使用overflow:hidden时，浏览器会**自动检查浮动区域的高度**  
优点：简单，代码少，浏览器支持好  
缺点：**不能和position配合使用**，因为**超出的尺寸**的会**被隐藏**  
建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用  
评分：★★★☆☆

<!DOCTYPE html>
    <html lang="zh">
    
        <head>
            <meta charset="UTF-8" />
            <title>CSS水平垂直居中实现方式--定位实现</title>
            <style type="text/css"> 
    		   .div1{background:#000080;border:1px solid red;/*解决代码*/overflow:hidden;width:100%}
    		   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:100%}	   
    		   .left{float:left;width:20%;height:200px;background:#DDD}
    		   .right{float:right;width:30%;height:80px;background:#DDD}	  
    	    </style> 
        </head>
        <body> 
    		<div class="div1 "> 
    			<div class="left">Left</div> 
    			<div class="right">Right</div> 
    		</div>
    		<div class="div2">
    		   div2
    	    </div>
        </body>
    </html>

效果同上

5）父级div定义overflow:auto（代码和4）相同，只是把overflow:hidden改成overflow:auto）

显示效果同上

原理：父级元素必须定义**width或zoom:1**，同时**不能定义heigh**t，使用overflow:auto时，浏览器会自动检查浮动区域的高度

优点：简单，代码少，浏览器支持好  
缺点：内部宽高超过父级div时，会出现滚动条  
建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧  
评分：★★☆☆☆

6）父级div也一起浮动，其同级的div要设置clear:both并且margin-top失效

原理：所有代码一起浮动，就变成了一个整体  
优点：没有优点  
缺点：会产生新的浮动问题。  
建议：不推荐使用，只作了解。  
评分：★☆☆☆☆

<!DOCTYPE html>
    <html lang="zh">
    
        <head>
            <meta charset="UTF-8" />
            <title>CSS水平垂直居中实现方式--定位实现</title>
            <style type="text/css"> 
               .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;float:left;}
               /*margin-top:10px失效*/
               .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%;clear:both;}       
               .left{float:left;width:20%;height:200px;background:#DDD}
               .right{float:right;width:30%;height:80px;background:#DDD}      
            </style> 
        </head>
        <body> 
            <div class="div1 "> 
                <div class="left">Left</div> 
                <div class="right">Right</div> 
            </div>
            <div class="div2">
               div2
            </div>
        </body>
    </html>

**显示效果，.div2的margin-top失效**

![70 12][]

7）父级div定义display:table

原理：将div属性变成表格  
优点：没有优点  
缺点：会产生新的未知问题  
建议：不推荐使用，只作了解  
评分：★☆☆☆☆

<!DOCTYPE html>
    <html lang="zh">
    
        <head>
            <meta charset="UTF-8" />
            <title>CSS水平垂直居中实现方式--定位实现</title>
            <style type="text/css"> 
               .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;display:table;}
               .div2{background:#800080;border:1px solid red;height:100px;width:98%;margin-top:10px}       
               .left{float:left;width:20%;height:200px;background:#DDD}
               .right{float:right;width:30%;height:80px;background:#DDD}      
            </style> 
        </head>
        <body> 
            <div class="div1 "> 
                <div class="left">Left</div> 
                <div class="right">Right</div> 
            </div>
            <div class="div2">
               div2
            </div>
        </body>
    </html>

显示的效果

![70 13][]

8）结尾处加br标签clear:both

原理：**父级div定义zoom:1**来解决**IE浮动**问题，**浮动元素结尾处**加**br标签clear:both**  
建议：不推荐使用，只作了解  
评分：★☆☆☆☆

<!DOCTYPE html>
    <html lang="zh">
    
        <head>
            <meta charset="UTF-8" />
            <title>CSS水平垂直居中实现方式--定位实现</title>
            <style type="text/css"> 
               .div1{background:#000080;border:1px solid red;/*解决代码*/zoom:1}
               .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}       
               .left{float:left;width:20%;height:200px;background:#DDD}
               .right{float:right;width:30%;height:80px;background:#DDD} 
               .clearfloat{clear:both}     
            </style> 
        </head>
        <body> 
            <div class="div1 "> 
                <div class="left">Left</div> 
                <div class="right">Right</div> 
                <br class="clearfloat" />
            </div>
            <div class="div2">
               div2
            </div>
        </body>
    </html>

显示效果

![70 14][]

**90、CSS中的class和id有什么区别**

1）css中的id的引用方式是 \#id名，类的引用方式是.className

2）用id书写的css的优先级大于用className书写的css，不管他们的的书写顺序

3）在.html文件中，同一id名只能出现一次，而类可以出现多次

**92、一个高宽未知的图片如何在一个比他大的容器内水平垂直居中**

1）给父级的div设置固定的宽高；display:table-cell；vertical-align:middle;text-align:center;font-size:0

img设置：width:100%;height:100%;display:block

<!DOCTYPE html>
    <html lang="zh">
    
        <head>
            <meta charset="UTF-8" />
            <title>CSS水平垂直居中实现方式--定位实现</title>
            <style type="text/css"> 
               .div1{
                    background:#000080;
                    display:table-cell;
                    vertical-align: middle;
                    text-align: center;
                    width:200px;
                    height:200px;
                    /*解决高多出的3px*/
                    font-size:0;
                } 
                .div1 img{
                    width:100%;
                    height: 100%;
                    /*解决高多出的3px*/
                    /*display: block;*/
                }     
            </style> 
        </head>
        <body> 
            <div class="div1 "> 
                <img src='1.png'>
            </div>
        </body>
    </html>

**93、table标签的作用是什么**

1）用于布局（过时）  
2）用于显示批量的数据

**缺点**：加载页面的时候，需要**全部的数据都请求到**，**才显示页面**，否则就是**一片的空白**。因此现在一般不采用table来做布局，而是使用**div+css进行布局**

**94、定义链接四种状态的伪类的正确书写顺序是？**

a:link
    a:visited
    a:hover
    a:active

**96、遇到疑难问题时，你通常时如何解决的？**

1）先自己思考，然后去statckoverflow查找或者segmentFault

2）要是还是解决不了就是会找同事一起讨论

**97、inline，inline-block和block的区别是**

1）display：block：将元素显示为**块级元素**，可以设置元素的height//width,padding,border,margin，**每一个块级元素**都是**从新的一行开始**  
2）display : inline：将元素显示为**行内元素**，**高度、宽度、行高以及margin-top  margin-right   margin-bottom不可设置**，高度就是内容文字或者图片的宽度，不可以改变。**多个**相邻的**行内元素**排在同一行里，页面一行排列不下时，才会换新的一行  
3）display：inline-block：行内块级元素会**排列在同一行**，可以设置大小，在同一**行内有不同高度内容的元素**时，通常要设置**对齐方式如vertical-align**: top;来使元素顶部对齐

**99、CSS超过宽度的文字显示点点，必须要设置的属性，text-overflow**

**text-overflow: clip|ellipsis|string;（没有继承性）**

**1）clip**：修剪文本（默认值）

**2）ellipsis**：显示省略符号来代表被修剪的文本

**3）string**：使用给定的字符串来代表被修剪的文本

**100、设置文字阴影属性，设置表格边框合并属性**

**设置文本阴影text-shadow**，text-shadow: h-shadow v-shadow blur color;没有默认值，可以继承

**设置表格边框合并属性border-collapse**，可以继承，border-collapse：seperate|collapse|inherit

**seperate**：默认值，边框会被分开，不会忽略 border-spacing 和 empty-cells 属性

**collapse**：如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

**inherit**：从父元素继承

**101、文本强制换行  <br>**

**102、display：none与visibility:hidden的区别是什么、opacity:0、position:absolute**

opacity:0：透明度为0，占据页面空间，还可以设置交互事件

两者都是将页面元素隐藏，但是具体效果有差别

**display:none**\-----**完全隐藏元素**，该隐藏元素**不在占据页面空间，**没有事件交互相当于将元素一处页面

**visibility:hidden** \----仅仅是**隐藏**元素的**显示效果**，但是隐藏的元素任然**占据页面的空间**，没有事件交互

没有设置display和visibility属性的页面

<!DOCTYPE html>
    <html lang="zh">
    
        <head>
            <meta charset="UTF-8" />
            <title>CSS水平垂直居中实现方式--定位实现</title>
            <style type="text/css"> 
               .div1{
                    background:#000080;
                    width:400px;
                    height:400px;
                }  
                .div2{
                    margin-top:10px;
                    background:red;
                    width:400px;
                    height:400px;
                }    
            </style> 
        </head>
        <body> 
            <div class="div1 "></div>
            <div class="div2"></div>
        </body>
    </html>

![70 15][]

给.div1设置display:none的显示效果，.div2会上浮到.div1的位置

![70 16][]

给.div1设置visibility:hidden的显示效果，可以看到.div2还是在原来的位置显示

![70 17][]

**103、超链接访问过后hover样式后会出现什么问题？如何解决**

**问题**：被**点击访问过**的超链接样式不在具有**hover和active样式**了

**解决方法**：正确书写4个伪元素的顺序

a:link
    a:visited
    a:hover
    a:active

**116、css中position的属性值都有哪些？并描述其含义及具体解释**

**position**属性规定**元素的定位类型**，**任何元素**都可以**定位**，不过**绝对或固定元素**会生成一个**块级框**，而**不论该元素本身是什么类型**。相对定位元素会相对于**它在正常流中的默认位置偏移。没有继承性**

static：默认值，没有定位，元素出现在正常流中（忽略top/right/bottom/left/z-index声明）

relative：相对定义，相对于它在**正常流中的默认位置偏移**

absolute：绝对定位，相对于除了static定位以外的第一个父元素进行定位，元素的位置通过top/right/bottom/left设置

fixed：固定定位，相对于浏览器窗口定位，元素的位置通过top/right/bottom/left设置

sticky

inherit

**128、html5 中的应用缓存是什么**

定义

**HTML5**提供一种**应用缓存机制**，使得**基于web的应用程序**可以**离线运行**。开发者可以使用  **Application Cache (AppCache)  接口**设定**浏览器缓存的数据**并使得**数据离线有效**。 在处于离线状态时，即使用户点击**刷新按钮**，应用也能正常加载与工作

优点

**1）离线浏览**: 用户可以在离线状态下浏览网站内容  
**2）更快的访问速度**: 因为**数据被存储在本地**，所以速度会更快

**3）减轻服务器的负载**: 浏览器只会下载在服务器上发生改变的资源

用法

1）在<html>添加属性manifest='cache.manifest'

2）cache.manifest文件是**简单的文本文件**，告诉浏览器缓存和不缓存的内容

CACHE MANIFEST   //在此标题下列出的文件将在首次下载后进行缓存,必须的
    / index.html     //当manifest文件加载后，浏览器从网站的根目录下下载这些文件
    /cache.html
    /style.css
    /image1.png
    
    NETWORK:        //在此标题下列出的文件需要与服务器的连接，且不会被缓存
    network.html
    
    FALLBACK:      //在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
    / fallback.html

更新缓存

一旦应用被缓存，它就会保持缓存直到发生下列情况：  
   （1）、用户清空浏览器缓存  
   （2）、manifest 文件被修改（参阅下面的提示）  
   （3）、由程序来更新应用缓存

**注意**: 浏览器对缓存**数据的容量**限制可能不太一样（某些浏览器设置的限制是**每个站点 5MB**）

**130、简单介绍boostrap栅格系统**

Bootstrap的定义

bootstrap是一个结合html、css、js的前端框架，他是基于jQuery的，jQuery本身是能够兼容各大浏览器的，所以bootstrap**对各种浏览器的兼容也是非常好的**，再者，bootstrap一个非常大的特点就是它的**响应式布局**，所谓响应式布局就是用**bootstrap写出来的页面能够根据屏幕尺寸的大小而进行相应的变化**，比如用bootstrap写出来的同一份html代码在pc端显示一个样式，在移动端看到的可能是另外一个样式，其实响应式布局的出现就是为了适应现在大量移动端的访问。   
bootstrap本身对**表单控件、导航条**等已经封装了**自己的样式**，我们**只需要copy代码**就能够实现一些**非常炫的样式**，但是要改动bootstrap的样式是比较困难的，所以**bootstrap的局限性**在于它的**样式是非常有限**的，并且要**扩展还比较困难**

** bootstrap的响应式布局**主要依靠的就是它的**栅格系统**，Bootstrap内置了一套**响应式、移动设备优先的流式栅格系统**，随着屏幕设备或视口（viewport）尺寸的增加，系统会**自动分为最多12列**。通过一系列的**行（row）与列（column）的组合创建页面布局**，然后你的内容就可以放入到你创建好的布局当中。Bootstrap栅格系统的工作原理：通过**定义容器大小**，**平分12份**(也有平分成24份或32份，但12份是最常见的)，再**调整内外边距**，最后**结合媒体查询**，就制作出了**强大的响应式网格系统**。Bootstrap框架中的**网格系统**就是将容器平分成12份

**130、移动端响应式布局**\----viewport的介绍

viewport----网页的可视区域

对于viewport可以设置的属性有：

**1）width**：指定** viewport 的宽度**，可以指定的一个值，如果 600，或者特殊的值，如 **device-width** **为设备的宽度**（单位为缩放为 100% 时的 CSS 的像素）

**2）height**：指定viewport的高度，同width

**3）initial-scale**：**初始缩放比例**，也就是当页面第一次 load 的时候缩放比例

**4）maximum-scale**：允许用户缩放到的最大比例

**5）minimum-scale**：允许用户缩放到的最小比例

**6）user-scalable**：用户是否可以手动缩放

**130、前端实现动画的方法**

使用css3实现动画：transition    animation   transform

**1）transition:-----设置变化的属性的值**

//默认值为all  0 ease 0
    transition: property duration timing-function delay;

**实现鼠标放到div上，div的宽度会变大**

div{
     width:100px;
     height:100px;
     background:blue;
     transition:width 2s;
     -moz-transition:width 2s; /* Firefox 4 */
     -webkit-transition:width 2s; /* Safari and Chrome */
     -o-transition:width 2s; /* Opera */
    }
    
    div:hover{
      width:300px;
    }

**2）transform**\----是一种变化属性，该属性允许我们对元素进行**旋转rotate(90deg)、缩放scale(2)、移动translate(100px,200px)或倾斜skew(90deg),**可以作为transition中需要变化的属性

**3）animation-**\---使元素从一种样式逐渐变化为另一种样式的效果

@keyframes myfirst{
     0%   {background: red;}
     25%  {background: yellow;}
     50%  {background: blue;}
     100% {background: green;}
    }
    
    div{
     animation-name: myfirst;
     animation-duration: 5s;
     animation-timing-function: linear;
     animation-delay: 2s;
     animation-iteration-count: infinite;
     animation-direction: alternate;
     animation-play-state: running;
    }

使用jQuery的animate方法

//语法1
    //styles---必需,规定产生动画效果的 CSS 样式和值,只有数字值可创建动画（比如 "margin:30px"）
    $(selector).animate(styles,speed,easing,callback）
    //语法2
    $(selector).animate(styles,options)

使用原生的js实现动画，可以定义每一步的动画效果，可做兼容性处理，定义所有的动态函数，并且进行计算、判断、处理

使用触发动画的时机（事件），比如onmouseover   onmouseleave等，在定义每个动画的具体过程，通过setInterval()  setTimeout()来设置元素的left  top  bottom rigth  width  等

**设置一个动画，从左上角到右下角的动画**

<div id="test" class="test"></div>
    <script>
        function moving() {
          var top = parseInt(div.style.top);
          var left = parseInt(div.style.left);
          top+=1;
          left+=1;
          div.style.top=top+"px";
          div.style.left=left+"px";
          // 结束动画的时机
          if (top>=500) return true;
    
          movement = setTimeout("moving()",5);
        }
    
        //初始化一些属性值
        function move() {
            div = document.getElementById("test");
            // 一定要通过下面设置初始值，否则拿不到数据
            div.style.top="0";
            div.style.left="0";
            //调用动画函数
            movement = setTimeout("moving()",500);
        }
    
        //加载动画的时机
        window.onload=function() {
            move();
        }
    </script>

[Link 1]: https://blog.csdn.net/fanhu6816/article/details/53467824
[70]: /images/20220301/ffd4eadd8f3a44099d0d6b133620fcf5.png
[70 1]: /images/20220301/dfef5772c707473aae64d4e760fa7359.png
[70 2]: /images/20220301/efc599d1c5ec421486e970a459bfb296.png
[http_cssreset.com]: http://cssreset.com/
[http_necolas.github.io_normalize.css]: http://necolas.github.io/normalize.css/
[70 3]: /images/20220301/887d4d44f6214885bfaec4ee905c33eb.png
[70 4]: /images/20220301/c28e7fcda815443685fd36d772d325be.png
[70 5]: /images/20220301/5ebf0511b49c48eda2638709d1a8a05c.png
[70 6]: /images/20220301/2940270a18074399b662444fcdb2e4fa.png
[70 7]: /images/20220301/21ac96cba66e4ebe86fb8f0566de54bc.png
[70 8]: /images/20220301/5232aceea22045a98a28c6ac1bbe0f8e.png
[70 9]: /images/20220301/a7a38a67924b48209f4a792d2c84a95b.png
[70 10]: /images/20220301/ad50537173e94f08840de2c9055d5dfa.png
[70 11]: /images/20220301/f99c0d8a40db4732b32c3c98bdcc74e6.png
[70 12]: /images/20220301/087d537cd57d4bb3a50ffeb169e69183.png
[70 13]: /images/20220301/4679a498231e47f3891d4423a8b5ac4a.png
[70 14]: /images/20220301/e6043496982d497f8d1ae454df4bc8a4.png
[70 15]: /images/20220301/636bc874732c467584f36253290eea87.png
[70 16]: /images/20220301/8b7f43bd8f554a77baaf4bf351e9c982.png
[70 17]: /images/20220301/45004eaac79b4e10b5c0e00118745711.png