大前端面试一(基础)

1.盒模型

1. 五种布局的优缺点

解答：

1. float布局， 缺点：需要清除浮动。 优点：兼容性好。
2. 绝定位： 优点：快捷，不容易出问题 缺点：布局已经出文档流，导致了方案的课使用性比较差。
3. flexbox布局： 优点：解决上面两种布局的缺点，比较完美的一个。
4. 表格布局： 优点：快捷，兼容性好 缺点： 三个布局，不需要同时增高的。它是随着更改增高的。
5. grid布局：

2. 假设高度已知，请写出三栏布局，其中左，右各位300px,中间自适应。

flexbox table布局可以使用。 中间自适应

3. 三种布局方案里面你感觉最优的是哪个？哪个在工作中经常使用？
4. 其他延伸布局：

左右宽度固定，中间自适应。
上下高度固定，中间自适应。
左宽度固定，右自适应。
右宽度固定，左自适应。
上高度固定，下自适应。
下高度固定，上自适应。

<section class="layout float">
        <style type="text/css">
            .layout.float div{
                min-height: 200px;
            }
            .layout.float .left-right-content{
                width: 100%;
            }
            .layout.float .left{
                width: 300px;
                background: red;
                float:left;
            }
            .layout.float .right{
                width: 300px;
                background: blue;
                float:right;
            }
            .layout.float .center{
                background: yellow
            }
        </style>
        <article class="left-right-content">
            <div class="left"></div>
            <div class="right"></div>
            <div class="center">
                <p>我是中间内容</p>
                <p>我是中间内容</p>
                <p>我是中间内容</p>
            </div>
        </article>
    </section>
    <section class="layout absolute">
        <style type="text/css">
            .layout.absolute div{
                position: absolute;
                min-height: 200px;
            }
            .layout.absolute .left{
                left: 0px;
                width: 300px;
                background: red;
            }
            .layout.absolute .right{
                right: 0px;
                width: 300px;
                background: blue;
            }
            .layout.absolute .center{
                left:300px;
                right: 300px;
                background: yellow
            }
        </style>
        <article class="left-right-content">
            <div class="left"></div>
            <div class="right"></div>
            <div class="center">    中间内容</div>
        </article>
    </section>
    <section  class="layout flexbox" >
        <style type="text/css">
            .layout.flexbox{
                margin-top:240px;
            }
            .layout.flexbox .left-right-content{
                display: flex;
                min-height: 200px;
            }
            .layout.flexbox .left{
                width: 300px;
                background: red;
            }
            .layout.flexbox .right{
                width: 300px;
                background: blue;
            }
            .layout.flexbox .center{
                background: yellow;
                flex: 1;
            }
        </style>
        <article class="left-right-content">
            <div class="left"></div>
                <div class="center">
                    flexbox内容
                </div>
            <div class="right"></div>
        </article>
    </section>
    <section class="layout table">
        <style type="text/css">
            .layout.table .left-right-content{
                width: 100%;
                display: table;
                height: 100px;
            }
            .layout.table .left-right-content div{
                display: table-cell;
            }
            .layout.table .left{
                width: 300px;
                background: red;
            }
            .layout.table .right{
                width: 300px;
                background: blue;
            }
            .layout.table .center{
                background: yellow;
            }
        </style>
        <article class="left-right-content">
            <div class="left"></div>
            <div class="center">
                <p>table布局</p>
                <p>table布局</p>
                <p>table布局</p>
                <p>table布局</p>
                <p>table布局</p>
            </div>
            <div class="right"></div>
        </article>
    </section>
    <section class="layout grid">
        <style type="text/css">
            .layout.grid .left-right-content{
                width: 100%;
                display: grid;
                grid-template-rows: 100px;
                grid-template-columns: 300px auto 300px;
            }
            .layout.grid .left{
                background: red;
            }
            .layout.grid .right{
                background: blue;
            }
            .layout.grid .center{
                background: yellow;
            }
        </style>
        <article class="left-right-content">
            <div class="left"></div>
            <div class="center">
                <p>grid 布局</p>
                <p>grid 布局</p>
                <p>grid 布局</p>
                <p>grid 布局</p>
                <p>grid 布局</p>
                <p>grid 布局</p>
                <p>grid 布局</p>
                <p>grid 布局</p>
            </div>
            <div class="right"></div>
        </article>
    </section>

 

2.CSS设置盒模型

1. 盒模型的概念？ border margin padding 标准模型 和 IE模型

2. 标准模型和IE模型的区别？ 计算高度和宽度的区别

标准模型：box-sizing:content-box; 值计算content高度和宽度。浏览器默认的模型。
IE模型：box-sizing:border-box; 计算border 和 padding的 高度和宽度。

3.js如何设置获取盒模型的宽和高

dom.style.with/height
通过dom元素的style获取宽和高，只能获取内联属性的宽和高。

dom.currentStyle.width/height
浏览器不管怎样渲染，都能获取属性的宽和高，缺点是只能有ie浏览器支持。

window.getComputendStyle(dom).width/height
通用性更好一些。

dom.getBoundingClientRect().width/height;
计算一个元素的位置。根据视窗来获取元素的位置。

4.实例题：（根据盒模型解释边距重叠）**

<section id="sec">
        <style type="text/css">
            #sec{
                background: #f00;
            }
            .child{
                height:100px;
                background: #000;
                margin-top:10px;
            }
        </style>
        <article class="child" >
            
        </article>
</section>

 

1. BFC 的基本概念。
2. BFC的原理。
3. 如何创建BFC。
4. BFC使用场景。

5.BFC机制 overflow:hidden;

<section id="sec">
        <style type="text/css">
            #sec{
                background: #f00;
                overflow: hidden;
            }
            .child{
                height:100px;
                background: #000;
                margin-top:10px;
            }
        </style>
        <article class="child" >
            
        </article>
</section>

 

6.BFC(边距重叠解决方案)

BFC的基本概念： 块级格式化上下文。

BFC的原理：

渲染规则：

1.bfc垂直方向会发生重叠。 2.用来清楚浮动。 3.buf在页面上是一个独立容器，外面的容器不会影响内部的布局内部的不会影响外面的布局。

7.如何创建BFC：

overflow:hidden;
float:xxxx;//只要不为none都可以创建BFC
position:xxxx;  //只要不static都可以创建BFC
table-cell;     //也可以创建BFC；
overflow:xxxxx;

8.使用场景：

    <section id="sec">
        <style type="text/css">
            #sec{
                background: #f00;
                overflow: hidden;
            }
            .child{
                height:100px;
                background: #000;
                margin-top:10px;
            }
        </style>
        <article class="child" >
            
        </article>
    </section>
    <section id="margin">
        <style type="text/css">
            #margin{
                background: pink;
                overflow: hidden;
            }
            #margin >p{
                margin:5px auto 25px;
                background: red;
            }
        </style>
        <p>1</p>
        <div style="overflow: hidden;">
            <p>2</p>
        </div>
        <p>3</p>
    </section>
    <section id="layout">
        <style type="text/css">
            #layout{
                background: red;
            }
            #layout .left{
                float: left;
                width: 100px;
                height: 100px;
                background: pink;
            }
            #layout .right{
                height: 110px;
                background: #ccc;
                overflow: auto;
            }
        </style>
        <div class="left"></div>
        <div class="right"></div>
    </section>
    <!-BFC即使是float也会参与高度计算-->
    <section id="float">
        <style type="text/css">
            #float{
                background: red;
                overflow: auto;    /*加上bfc*/
            }
            #float .float{
                float: left;
                font-size: 30px;
            }
        </style>
        <div class="float">
            我是浮动元素
        </div>
    </section>

 

8.DOM事件类：

1.DOM事件级别：

1.DOM0：
element.onclick=function(){
    
}
2.DOM2:
//如果是true是捕获阶段，如果是false则是捕获阶段触发。
element.addEventListener("click",function(){
    
},false);
3.DOM3:
//如果是true是捕获阶段，如果是false则是捕获阶段触发。
element.addEventListener("keyup",function(){
    
},false);

2.DOM事件模型就是冒泡和捕获。

捕获 和 冒泡

3.DOM事件流。

必须要看javascript高级程序设计里面的事件

4.描述DOM事件捕获的具体流程。

window->document->html（标签）->body-> ...->目标元素。

5.Event对象的常见应用。

event.preventDefault();             //阻止默认事件
event.stopPropagation();            //阻止默认流
event.stoplmmediatePropagiation();  //事件响应优先级
event.currentTarget();              //当前被点击的元素
event.target();                     //当前所绑定的事件

6.自定义事件。

CustomEvent

<div id="ev">
    我是测试自定义事件
</div>
<script type="text/javascript">
    var ev = document.getElementById("ev");
    var eve = new Event("test");
    ev.addEventListener("test",function(){
        console.log("test");
    });
    ev.dispatchEvent(eve);//触发自定义事件
</script>

 

7.获取DOM

1.window                        //window对象
2.document                      //document
3.documet.documentElement       //html
4.document.body                 //body
5.getElementById("id");         //内联元素

8.HTTP协议类：

1.HTTP协议的主要特点

简单快速 灵活 无连接 无状态

2.HTTP报文的组成部分

 

 

 

 

请求报文

请求行GET/HTTP/1.1

请求头Host/Connect/Pragma

空行

请求体请求的数据

 

 

 

 

请求报文

HTTP/1.1/200/ok

请求头Host/Connect/Pragma

空行

请求体请求的数据

3.HTTP 方法

 

 

 

 

 

GET

获取资源

POST

传输资源

PUT

更新资源

DELETE

删除资源

HEAD

获取报文头部

4.POST 和GET的区别

几个比较注意的事项

1. GET在浏览器回退时是无害的，而POST会再次提交请求。
2. GET请求会被浏览器主动缓存，而POST不会。
3. GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。

5.HTTP 状态码

1. 1xx:指示信息-表示请求已接受，继续处理
2. 2xx:成功-表示请求已经被成功处理
3. 3xx:重定向-要完成请求必须进行更进一步的操作。
4. 4xx:客户端错误-请求有语法错误或者请求无法实现
5. 5xx:服务器错误--服务器未能实现合法的请求。

1. 200 OK：客户端请求成功
2. 206 Partial Content:客户发送了一个带有Range头的GET秦秋服务器完成了
3. 301 所有请求的页面已经转移到新的url里面
4. 302 所有请求的页面已经临时转移到新的url
5. 304 客户端有缓冲的文档并发出了一个条件性的情趣，服务器高数客户原来缓冲的文档还可以继续使用。
6. 400 客户端请求有语法错误，不能被服务器所理解。
7. 401：请求未被授权
8. 403 请求页面被禁止
9. 404 未找到页面
10. 500：服务器发生不可预期的错误原来缓存的文档还可以继续使用
11. 503：请求未完成，服务器临时过载或者当即，一段时间后可能恢复正常。

6.什么是持久层

HTTP1.0支持持久链接 HTTP1.1不支持持久链接 如果是 websocket支持持久链接。 HTTP2.0 https://blog.csdn.net/zhuyiquan/article/details/69257126?locationNum=4&fps=1

7.什么是管线化

一次打包请求响应。 请求1->请求2->请求3->响应1->响应2->响应3

9.原型链

1.创建对象有几种方法

//原型 
var o1 = {name:'o1'};
结果：Object{name:"o1"};
//构造函数
var o2 = new Object({name:"o2"});
结果：Object{name:"o1"}

//通过new方法创建一个对象
var M = function(name){this.name=name};
var o3 = new M("o3");
结果：M{name:"o3"}

//Object.create();原型链
var P={name:"o3"};
var o4 = Object.create(P);
结果：Object{o4.name}

*** 任何一个函数只要被new使用了就可以被称为是构造函数。

2.关联关系

构造函数M 的prototype指向原型对象
M对象的prototype（原型对象）对象的constructor指向M这个构造函数

M这个构造函数 new之后指向这个实例
这个实例的__proto__指向原型对象

原型对象的__proto__指向的是原型对象。

//通过new方法创建一个对象
var M = function(name){this.name=name};
var o3 = new M("o3");
结果：M{name:"o3"}

原型链的基本原理： 实例化通过原型链找到他的原型对象的方法(原型链上的方法是被共享的)。都是被实例所共享的。（说白了就是这样的一段代码）

var obj1 = function(name){this.name}
var o1 = new obj(name);
obj1.prototype.say()=function(){console.log("我要说话了");}
var o5 = new obj(obj1);
o1.say();   //这里是可以使用的
o5.say();   //o5这个实例化对象也可以调用say()这个方法。

3.instanceof的原理

4.new运算符

一个新对象被创建。它继承自foo.prototype。

构造函数foo被执行。执行的时候，相应的传参数会被传入，同时上下文(this)会被指定为这个心实例。new foo 等同于new foo(),只能用于在不传递任何参数的情况下。

如果构造函数返回一个对象，那么这个对象会取代整个new 出来的结果。如果构造函数没有返回对象，那么new 出来的结果为步骤1创建的对象。

10.面向对象

1.类与实例 类的声明 生成实例

/*
      类的声明
    */
    function Animal1(){
        this.name = "name";
    }
    /*
    ES6中的class声明
    */
    class Animal2(){
        constructor(props){
            let name = "name";
        }
    }
    /*实例化*/
    console.log(new Animal1(),new Animal2());

 

2.类与继承

//call继承

function Parent1(){
    this.name="parent1";
}
function child1(){
    Parent1.call(this); //apply 改变函数运行的上下文
    //改变了父类的指向
    this.type="child1";
}
结果：
child1 {name: "parent1", type: "child1"}
    name:"parent1"
    type : "child1"
//原型链继承

function Parent1(){
        this.name="parent1";
    }
    Parent1.prototype.say() = function(){};    //这里是不能继承的
    function child1(){
        Parent1.call(this); //apply 改变函数运行的上下文
        //改变了父类的指向
        this.type="child1";
    }
    console.log(new child1);
//借助原型链实现继承
    function Parent2(){
        this.name = "parent2"
    }
    function child2(){
        this.type="child2";
    }
    child2.prototype = new Parent2();    //实现继承父类
    console.log(new child2());
    结果：
    child2 {type: "child2"}
    type:"child2"
        __proto__:Parent2
        name : "parent2"
            __proto__ : Object
            
这种继承有一种缺点：
//组合继承

function Parent3(){
        this.name = "Parent3";
        this.play=[1,2,3];
    }
    function child3(){
        Parent3.call(this);
        this.name = "child3";
    }
    child3.prototype = new Parent3();
    var s3 = new child3();
    var s4 = new child3();
    s3.play.push(4);
    console.log(s3.play,s4.play);
    缺点：
    
//优化组合继承：

/*组合继承的优化*/
    function Parent4(){
        this.name = "Parent4";
        this.play=[1,2,3];
    }
    function child4(){
        Parent4.call(this);
        this.name = "child4";
    }
    child4.prototype =  Parent4.prototype;
    var s5 = new child4();
    var s6 = new child4();
    s5.play.push(4);
    console.log(s5.play,s6.play);

 

11.安全类：

1. CSRF

1. 基本概念

跨站请求伪造攻击

2. 攻击原理

3. 防御措施

Token认证，Referer验证(页面来源) 隐藏令牌

2. XSS

1. 基本概念

跨域脚本攻击

2. 攻击原理

注入脚本 http://www.imooc.com/learn/812

3. 防御措施

http://www.imooc.com/learn/812

区别：XSS：注入脚本运行 CSRF：利用本身的漏洞执行本身的接口

12.算法：

1.排序

冒泡排序 快速排序 选择排序 希尔排序 二分法排序

2.堆栈，列队，链表

3.递归

4.波兰式和逆波兰式