携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情

前端一些习题

❓在什么情况下可以输出you win?

   题意：如何达到a在第一次判断时等于1，第二次判断时等于2，第三次时等于3？

if (a==1 && a==2 &&a==3){
   console.log("you win!");
}

将a定义为对象，因为a判断与数字是否相等时会发生隐式类型转化，需要调用toString方法转化为字符串，进而转化为数字，所以可以通过重写toString方法实现

var a = {
	_a:0;
toString(){
    return _a++;
  }
}

如果将判断相等改为判断全等

if (a === 1 && a === 2 &&a === 3){
console.log("you win!");
}

获得对象的时候会默认调用get方法，所以我们只需要通过Object.defineProperty()方法重写get方法即可。

var _a = 0;
Object.defineProperty(window,'a',{
   get(){
     return ++_a;
  }
})  //给window上定义一个a的属性，并重写a的get方法

如果将a改成obj.a

if (obj.a === 1 && obj.a === 2 && obj.a === 3){
console.log("you win!");
}

重写obj中a的get函数

var obj = {
_a = 0;
};
Object.defineProperty(obj,'a',{
     get(){
      return ++_a;
   }
})

❓为什么给父元素设置了margin ：xxpx auto 后父元素没有在页面水平居中？
1. 因为没有给父元素设置宽度，margin中的auto意思是根据元素的宽度自适应，使该元素的左右距浏览器边缘的距离相等，没有宽度肯定不行。
2. 该属性只对块级元素起作用，对行内块和行内元素不起作用，可以转成块级元素再使用。
3. 父元素还设置了float：left/right ，出现逻辑上的矛盾
❓子元素和父元素宽高的继承性
1. 同为内联元素我们知道，内联元素不可以设置width和height，所以其宽度默认都是auto，由内容撑起来。
2. 同为块级元素子元素默认width是100%，所以会继承父元素的宽度；但是不会继承其高度，可以通过内容把高度撑起来；
  
  另外，给子元素添加padding和margin时，可以看到内容的宽度时父元素的宽度减去子元素的margin和padding值；
3. 父亲是块元素，孩子是内联元素一般的内联元素是不能设置width和height，同第一条；
  
  如果是img或者input等可以设置width和height的类型，对于img，如果不设置宽高则默认以图片原本大小显示，单独设置宽或者高的值则按原图等比例缩放，设置width:100%;height:100%则可以铺满整个父元素；
4. 同为块级元素，子元素脱离文档流 1)子元素设置浮动，则宽度为auto，宽度由内容撑起来
  
  2)子元素设置定位，position：absolute或者fixed，效果同上
  
  3)设置定位，position：relative，这时候子元素并没有脱离文档流，所以width依旧是100%；
5. 同为块级元素，父元素脱离文档流对子元素继承宽度没有影响
❓如何让三个div重叠在同一位置

将父元素的position设置为relative，将这三个子元素的position都设置为absolute。

前端习题小结

前端一些习题