2021-8-26Web前端应聘8道典型面试题（必考）

一、块级元素与行内元素的区别？

1. 块级独占一行的，行内与其他元素共享一行
 2.块级元素可以直接设置宽高，行内不能直接设置宽高，需要结合CSS的display来设置。
 3.块级元素可以嵌套块级与行内元素，而行内只能包含行内元素。

 二、清除浮动    100%
    父子级：
      1.在子级元素后添加一个空元素，为其添加clear:both  弊端：增加了无意义的元素结构
      2.给父级元素设置一个overflow:hiddden  解决了第一种方法的弊端
      3.   .hidden::after  为需要清除浮动元素的伪对象中设置height:0，
              #layout::after{
                    display:block；
                    clear:both;
                    content:"";
                                  } （用伪类清除浮动时用after，并且加上content：""可以加内容也可以不加，但是一定要加上display：block；,同时还要写clear：both；）
    
    【最推荐使用第二种】

    <div></div>
    <div></div>
    兄弟级：
      给当前元素（被浮动影响的元素）设置css属性clear,值可为left、right，both。作用分别为清除左浮动元素带来的影响，清除右浮动元素带来的影响，清除左右两侧浮动元素带来的影响。

三、常见系统的区别？ 

Linux内核  

windows  MAC 桌面级系统

四、布局原则：
    1.框架搭建：自上而下，由外向内
    2.通配符选择器重置全局样式：
    *{
        margin:0,
        padding:0
    }
    a{
       text-decoration: none;
       color: inherit;
    }
    3.由外向内布局，每一块元素依然遵循自上而下，由外至内的原则

五、 水平垂直居中问题： 
     1.margin移动  top、left
     2.父相对定位+子绝对定位，绝对定位top、left为50%，其余使用margin-left和margin-top移动
     3.父相对+子绝对，且left、top、bottom、right为0，margin：auto
     4.给父元素设置display:flex，且align-items:center;justify-content:center;

六、算法题 求101到200之间的素数。

代码：

for(var i=2 ; i<100 ; i++){

    var a = true;

for(var j = 2; j < i; j++){

        //判断i能否被j整除

    if(i%j == 0){

    //能被整除则说明不是素数，修改布尔值为false

    a = false ;

    }

}

//打印素数

if(a){

    console.log(i);

}

}

七、算法题 求水仙花数（水仙花数为其每个位上的数的其长度乘方之和等于自身值，则其为水仙花数，如407=4*4*4+0*0*0+7*7*7）

代码：for(var i=100;i<=999;i++){

              var a=parseInt(i/100)

               var b=parseInt(i%100/10)

               var c=parseInt(i%10)

if(a*a*a+b*b*b+c*c*c==i){

console.log(i)

}

}

八、算法题1 2 3 4四位数组成不重复三位数

var sum=0;

var count=0;

     for(var a=1;a<=4;a++){

     for(var b=1;b<=4;b++){

     for(var c=1;c<=4;c++){

                sum=a*100+b*10+c;

                if(a!=b&&c!==b&&a!==c){

                   console.log(sum);

                     count++;

                   } 

                }

            }

        }