常见面试题

来源

水平垂直居中方案

• 定位：三种
• display:flex
• JavaScript
• display:table-cell 定位

1、box宽高已知 2、需要设置宽高 3、不需要设置宽高，但兼容性不行

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

translate(x,y)	//定义 2D 转换

display:flex

JavaScript

<div class="box" id="box">
          123
</div>

  <script>
    let HTML = document.documentElement,
    winW = HTML.clientWidth,
    winH = HTML.clientHeight,
    boxW = box.offsetWidth,
    boxH = box.offsetHeight;
    console.log(boxW);
    box.style.position = "absolute";
    box.style.left = (winW-boxW)/2 + 'px';
    box.style.top = (winH-boxH)/2 + 'px';
  </script>

display:table-cell

标准盒子模型

• 标准盒模型：box-sizing:content-box 内容宽高

• 怪异（IE)盒模型：box-sizing:border-box

• flex弹性伸缩盒模型：Flex 布局教程：语法篇

• 多列布局

不管怎么调border或者margin、padding ，都是盒子的大小，这样写样式的时候比较方便，不用每次都来回删值。所以我在项目中大部分都应用box-sizing:border-box这种IE盒模型。而且我看到ElementUI组件源码公共样式里面默认样式都采用这个，所以我认为这是我们开发的一种规范样式。

几大经典布局方案

• 圣杯布局
• 双飞翼
• 左右固定，中间自适应 圣杯布局

<div class="container clearfix">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>      

    html,
    body{
      height: 100%;
      overflow: hidden;
    }
    .container{
      height: 100%;
      padding: 0 200px;
    }
    .right,
    .left{
      width: 200px;
      min-height: 200px;
      background-color: lightblue;
    }
    .center{
      width: 100%;
      min-height: 400px;
      background-color: antiquewhite;
    }
    .left,
    .right,
    .center{
      float: left;
    }
    .left{
      margin-left: -100%;
      position: relative;
      left: -200px;
    }
    .right{
      margin-right: -100%;
    }

双飞翼布局

<div class="container clearfix">
	<div class="center"></div>
 </div>     
<div class="left"></div>
<div class="right"></div>

基本类型和引用类型

基本类型直接存

引用类型先往堆里存，同时把地址赋给这个值

闭包

var a=0,b=0
function A(a) {
	A = function(b) {
    	alert(a + b++)
    };
    alert (a++);
}
A(1);
A(2);