阿里P6面试题-----（一）说一下你了解CSS盒模型。说一下box-sizing的应用场景。说一下你了解的弹性FL

电话面试

说一下你了解CSS盒模型。
说一下box-sizing的应用场景。
说一下你了解的弹性FLEX布局.
说一下一个未知宽高元素怎么上下左右垂直居中。
说一下原型链，对象，构造函数之间的一些联系。
DOM事件的绑定的几种方式
说一下你项目中用到的技术栈，以及觉得得意和出色的点，以及让你头疼的点，怎么解决的。
有没有了解http2.0,websocket,https，说一下你的理解以及你所了解的特性。

第一轮电面大约面了50分钟，还有一些细节问题可能淡忘了，总体来说，面的都是以基础为主，然后推荐给内部，进行正式的社招流程。

答案参考：

1,css盒子模型

广义上盒子的理解：

盒子的大小 = 盒子的宽度+盒子的高度（不是content的宽度和高度，默认情况下，定义的width和height指的是content)

计算公式如下：

盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距

也就是：

盒子的宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
盒子的高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

盒子的宽度和高度的计算方式由box-sizing属性控制：

box-sizing属性值
content-box：默认值，width和height属性分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距、边框、外边距。
border-box：为元素设定的width和height属性决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

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

2,box-sizing的应用场景

【box-sizing属性有3个可选值：border-box 和content-box（默认值）,inherit(继承)】

content-box：改变padding或者border会改变盒子大小,content大小不会变
borderer-box：当改变padding或者border，整个盒子的大小不会变，但是内容大小
会改变以适应整体大小不变，当修改paddding或这boeder会影响布局的时候，可以
选着这个属性
inherit: 会继承父类的box-sizing属性

3,flex弹性布局

传统的布局方案基于盒状模型,依赖display + position + float 的方式实现,灵活性较差,对于那些特殊的布局非常不方便.

2009年,W3C提出了一种新的方案--Flex布局.

Flex是Flexible Box的缩写,意为"弹性布局",用来为盒模型提供最大的灵活性,以便我们能够简便、完整、响应式的实现多种网页布局.
任何一个容器都可以指定为Flex布局,行内元素也可以设置为Flex布局
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

flex布局要掌握的基本概念：

容器和项目

主轴和交叉轴

容器属性和项目属性

容器属性包括：

flex-direction: row | row-reverse | column | column-reverse; (决定主轴的方向即项目排列的方向)

flex-wrap: nowrap | wrap | wrap-reverse; (项目是否换行)

flex-flow: || <flex-wrap>;(flex-direction属性和flex-wrap属性的简写)

justify-content: flex-start | flex-end | center | space-between | space-around;(项目在主轴上的对齐方式及额外空间的分配方式)

align-items: stretch | flex-start | flex-end | center | baseline;(项目在交叉轴上的对齐方式)

align-content: flex-start | flex-end | center | space-between | space-around | stretch;(多根轴线的对齐方式)

项目属性包括：

order: <integer>; (控制项目在容器中的先后顺序)

flex-grow: <number>;/* default 0 */(项目的放大比例)

flex-shrink: <number>;(项目的缩小比例)

flex-basis: | auto;(义项目在分配额外空间之前的默认尺寸)。

flex: (flex-grow, flex-shrink 和 flex-basis的简写)

align-self: auto | flex-start | flex-end | center | baseline | stretch;(属性定义项目的对齐方式)

4,未知宽高的元素如何垂直水平居中

第一种：子元素设置为绝对定位，设置元素的相对于自身的偏移度为负50%(也就是元素自身尺寸的一半)

    .parent{
        position:relative;
    }
    .child{
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
    }

这是css3里的样式;缺点:兼容性不好，只支持IE9+的浏览器
第二种:利用子元素的绝对定位，设置left,right,top,bottom都为0，然后设置margin:auto

    .parent{
        position:relative;
    }
    .child{
        position:absolute;
        left:0px;
        right:0px;
        top:0px;
        bottom: 0px;
        margin:auto;
    }

第三种：利用flex布局来达到使元素水平垂直居中

<div class="box">
    <section class="inner"></section>
</div>

 .box {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
    width: 1000px;
    height: 600px;
    border: 1px solid red;
}
.inner {
    width: 300px;
    height: 200px;
    background-color: red;
}

5,原型链，对象，构造函数之间的联系

function A(){
    this.name="A name";
}

function B(){
    this.name="B name";
}

B.prototype=new A();
let b=new B();

原型链：

    每一个构造函数都有一个prototype属性，这个属性叫做构造函数的原型对象。如上所示：构造函数B的原型对象是A的实例对象
    每一个对象实例都有一个_proto_属性,这个属性执行构造函数的原型对象，如上所示：构造函数B的实例对象b的_proto_属性指向构造函数B的原型对象。
    实例对象b在查找属性的过程中，先从自身进行查找，如果没有查找到，会根据_proto_属性继续在原型对象上面查找，这就构成了原型链

对象：

对象通过构造函数的new方法产生，对象属性的查找是根据原型链一步步向上查找。

构造函数：

没有通过new使用的构造函数和普通函数没有区别，当构造函数在被new的时候，会生成一个新的this对象，然后进行赋值，以及返回this,就会变成下面的逻辑，只不过1,3步是隐藏的。

function B(){
    var  this=new Object();//1,产生一个空的this对象
    this.name="B name"; //2,给空对象赋值
    return this;//3,返回this
}

6,DOM事件的绑定的几种方式

1.在DOM中绑定, 在html中通过on+"事件名称"

<button οnclick="alert('111')" type='button'></button>
<button οnclick="myClick()"></button>

2.在js中绑定。

elementObj.onXxx = function(){}
elementObj.οnclick=function() {
alert('111')

3.利用事件监听，但是事件监听要考虑到浏览器兼容性 Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
elementObj.addEleventListener(type, handele, useCapture) // useCapture是事件流，是否捕获

function addEvent(obj, type, handle) {
	try {
		obj.addEventListener(type, handle, false);
	} catch(e) {
		try {
			obj.attach('on' + type, handle);
		} catch(e) {
			obj['on' + type] = handle;
		}
	} 
}