某厂面试基础题

码农天地 - 2020-11-03 23:22:09

---

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

Tags 标签