快牛科技-前端面试题

1. bootstrap的布局是如何实现的?电脑端与手机端如何实现自适应？

<div class="container">

    <div class="row">

        <div class="col-md-12'></div>

    </div>

</div>

container类为相应式宽度提供宽度约束，且拥有15px padding(左右)值的留白

@media (min-width:768px){

    .container{  width:750px   }

}

@media (min-width:992px){

.container{  width:970px}

}

@media (min-width:1200px){

.container{  width:1170px}

}

2. 用css实现以下布局，确保自适应

利用bootstrap布局：

<div class="container">

  <div class="row" >

      <div class="col-md-4 col-sm-12 con" >

  <img src="/wp-content/uploads/2014/06/download.png"/>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

      </div>

  <div class="col-md-4 col-sm-12 con" >

  <img src="/wp-content/uploads/2014/06/download.png"/>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

      </div>

  <div class="col-md-4 col-sm-12 con" >

  <img src="/wp-content/uploads/2014/06/download.png"/>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

  </div>

  </div>

</div>

样式补充：

.con{border:1px solid red;padding:0;height:150px;position:relative;}

.con img{border:1px solid blue;width:100%;height:100%;}

.con p{height:100px;margin-top:-100px;color:red;text-align:center;}

3.用js实现一个单词数组（以单个字符存储），将其单词倒叙排列

let arr=[I, ,a, m, , a, ,s,t,u,d,e,n,t]

function change(arr,index1,index2){

    var temp;

    temp=arr[index1];

    arr[index1]=arr[index2];

    arr[index2]=temp;

}

function mySort(arr){

    for(var i=0;i<arr.length/2;i++){

        change(arr,i,arr.length-i-1);

    }

    for(var j=0;j<arr.length;j++){

        var k=0;

        if(arr[j]==' '){

            for(let i=k;i<j/2;i++){

                change(arr,i,j-1-i);

            }

            k=j+1;

        }

    }

}