某厂面试基础题

1. 盒模型分成哪几个区域？标准浏览器下，给元素设置width\height,是设置的盒模型哪个区域，怎么改？

盒模型区域： content(内容) padding(内边距) border（边框）margin(外边距)
标准浏览器下（对W3C所定义的CSS2.1规范提供了优秀支持并能完美呈现的浏览器。）：设置的width/height是content区域的宽高。
怎么改： 设置box-sizing值为border-box,此时设置的width/height值包括contnt+ pandding + border

例如：

.test{
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 5px solid #000;
    margin: 10px;
    box-sizeing:border-box;
}

2.实现下面布局的方式

方式1： felx布局 flex详解

.father{
    width: 420px;
    height: 300px;
    border: 1px solid red;
    
    
    padding: 0 90px；
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.father>.child{
    width: 98px;
    height: 98px;
    border: 1px solid #ccc;
    background-color: #e1e1e1;
}

方式2： grid布局 grid详解

 .father{
    width: 420px;
    height: 300px;
    border: 1px solid red;
    display: grid;
    grid-template-columns: 33.33% 33.33% 33.33%;
    justify-items: center;
    align-items: center;
}
.father>.child{
    width: 98px;
    height: 98px;
    border: 1px solid #ccc;
    background-color: #e1e1e1;
}

方式3：display:inlie-block;

.father{
    width: 420px;
    height: 300px;
    border: 1px solid red;
    
    text-align: center;
}
.father>.child{
    width: 98px;
    height: 98px;
    border: 1px solid #ccc;
    background-color: #e1e1e1;

    display: inline-block;
    margin: 100px 10px 0;
 
    
}

方式4：float
这里的子元素写代码的位置要写成 1 3 2

.father{
    width: 420px;
    height: 300px;
    border: 1px solid red;

    padding: 0 40px;
    
}
.father>.child{
    width: 98px;
    height: 98px;
    border: 1px solid #ccc;
    background-color: #e1e1e1;
    
}
.child:nth-child(1){
    margin-top: 100px;
    float: left;
}
.child:nth-child(2){
    margin-top: 100px;
    float: right;
}
.child:nth-child(3){
    margin: 100px auto 0;
}

3.如何实现移动端1px边？

1.为什么要这么做？
例如平时我们写列表的底边，直接border-bottom:1px solid #666;
这时候设计会过来说做出来的线太粗了，没按设计稿做。。。

2.实际原因：不同分辨率的手机，我们在样式文件中写的1px的边框看起来的厚度都不一样，因为同样是写的1px，但是在不用设备表示的具体设备像素不一样。比如在设备像素比为2的iphone6（分辨率750*1334）上，我们写1px 代表的是设备上的2个设备像素，在dpr为3的设备上代表的又是3个设备像素，我们写1px的本意呢是想要表示最小的一个单位，而在dpr为2和3的设备上显然没有做到，所以在dpr为2 的设备上我们需要scale0.5 ，在dpr3的设备上我们要scale 0.33;

3.实现：

li::before{
    content:'';
    display: block;
    width: 100%;
    height: 1px;
    background-color: red;
    transform: scaleY(.5);
    transform-origin:0 0;
    position: absolute;
    top: 0;
    left: 0;
}

4.如果要实现一个元素的四条边？

4.call apply bind 区别

同： 三者都用来改变this指向
异：

 var year = 2020,place='北京';
    var company = {
        name:'优贝',
        slogan:'唱好听的歌，交有趣的人!',
        age:8,
        say:function(year,place){
            console.log(`${year}年${this.age}岁的${this.name}在${place}说：${this.slogan}`)
        }
    }
    var dev1 = {
        name:'开发甲',
        slogan:'今晚加班好开心',
        age:'60',
    }

    company.say(year,place);//2020年8岁的优贝在北京说：唱好听的歌，交有趣的人!

1.call 第一个参数改变this 指向，后面的参数一个一个传参进去；

    company.say.call(dev1,year,place);
    //2020年60岁的开发甲在北京说：今晚加班好开心

2.apply 第一个参数改变this指向，后面的参数以数组的形式传进去，但是使用时还是一个一个赋值的。

    company.say.apply(dev1,[year,place]);
//2020年60岁的开发甲在北京说：今晚加班好开心

3.bind 第一个参数改变this,并且返回被改变this指向的函数，并不会执行此函数；

 var fn =  company.say.bind(dev1);
 fn(2022,'上海');
 //2022年60岁的开发甲在上海说：今晚加班好开心

5.写出下面代码一次输出什么？

   a = 100;
   function demo(e){
       arguments[0]=2;
       function e(){}
       console.log(e);
       if(a){
           var b = 123;
       }
       a=10;
       var a;
       console.log(b);
       function c(){};
       var c;
       f =123;
       console.log(c);
   }
   var a ;
   demo(1);
   console.log(a);
   console.log(f);
   
   
   
   
   
   // 2 undefined function c(){}  100   123

知识点：
1.变量、函数的提升
2.条件不成立，{}里面的变量依旧会提升。
3.函数提升优先级高于变量提升，且不会被同名变量声明时覆盖，但是会被变量赋值后覆盖（不会重复提升，但会重新赋值）
4.作用域链

6.以下代码输出什么，为什么，如果不想这样输出，要怎么解决？

var obj = {
  name:'youbei',
  age:9,
}
var obj1 = obj;
obj1.name='meituan';
obj1.age = 7;
console.log(obj.name,obj.age);//meituan 7

如果不想这样输出，就要复制一个对象，不要两个对象共用同一个引用；（对象的拷贝）

方式：Object.assign(target,source)

var obj = {
  name:'youbei',
  age:9,
}
var obj1 = Object.assign({},obj);
obj1.name='meituan';
obj1.age = 7;
console.log(obj.name,obj.age);

问题：Object.assign 是浅拷贝，也就是如果源对象里的某些key对应的值是object类型,则只会拷贝对此object类型数据的引用，也就是说会多处共用一个储存空间，一个地方改变了，其他地方在取值也就变了。

var obj = {
  name:'youbei',
  age:9,
  others:[1,2],
}
var obj1 = Object.assign({},obj);
obj1.name='meituan';
obj1.age = 7;
obj1.others[2]=3;
console.log(JSON.stringify(obj1));
//{"name":"meituan","age":7,"others":[1,2,3]}
console.log(JSON.stringify(obj));
//{"name":"youbei","age":9,"others":[1,2,3]}

解决：深拷贝
方式1：

function deepCopy(source){
    if(!isObject(source)) return source;
    let target = Array.isArray(source)?[]:{};
    for(var k in source){
        if(soucre.hasOwnProperty(k)){
            if(typeof source[k] =='object'){
                target[k] = deepCopy(source[k]);
            }else{
                target[k] = source[k]
            }
        }
    }
    return target;
}
function isObject(obj){
    return typeof obj==='object' && obj!==null
}
var obj1 = deepCopy(obj);
obj1.name='meituan';
obj1.age = 7;
obj1.others[2]=3;
console.log(JSON.stringify(obj1));
console.log(JSON.stringify(obj))
//{"name":"meituan","age":7,"others":[1,2,3]}
//{"name":"youbei","age":9,"others":[1,2]}

方式2：

var obj = {
  name:'youbei',
  age:9,
  others:[1,2],
}
var obj1 = JSON.parse(JSON.stringify(obj));
obj1.name='meituan';
obj1.age = 7;
obj1.others[2]=3;
console.log(JSON.stringify(obj1));
console.log(JSON.stringify(obj));
//{"name":"meituan","age":7,"others":[1,2,3]}
//{"name":"youbei","age":9,"others":[1,2]}

7.png、gif、jpg、webp这些图片的优缺点、使用场景？还有什么格式？

1.png是透明图片，多是异型图，可以用作一些icon，按钮上，或者一些小角标...

2.gif是动图会更加生动，吸引用户，但是图片会比较大，加载也就会慢一些。

3.jpg用的最多，一般目前活动的一些头图。
4.webP提供了无损和有损压缩能力，同时在有损条件下支持透明通道.无损WebP相比PNG减少26%大小；有损WebP下相比JPEG减少25%~34%的大小；有损WebP也支持透明通道，大小通常约为对应PNG的1/3。 同时，谷歌于2014年提出了动态WebP，拓展WebP使其支持动图能力。动态WebP相比GIF支持更丰富的色彩，并且也占用更小空间，更适应移动网络的动图播放。
缺点就是兼容不好。

5.其它格式如bmp svg pcx tif tga exif raw.....

8.移动端的适配 这三种适配