解析面试题

天涯何处我何归
259 阅读5分钟

面试问题总结一部分

image.png

第一题：考flex布局

方案一：

<!-- html部分 -->
  <div class="content">
    <div class="left"></div>
    <div class="right"></div>
  </div>
/*  css部分*/
     *{
         margin:0;
         padding:0;
        }
    .content {
      display: flex;
      margin-right: 50px;
    }

    .left,
    .right {
      height: 100px;
      margin-left: 50px;
      flex: 1;
      background-color: green;
    }

    .right {
      background-color: orange;
    }

方案二：

<!-- html部分 -->
  <div class="content">
    <div class="left"></div>
    <div class="right"></div>
  </div>

/*  css部分*/
    *{
         margin:0;
         padding:0;
        }
    .content{
      display: flex;
      width: calc(100%-50px);
      padding-right: 50px;
    }
    .left{
      height: 100px;
      margin-left:50px;
      flex: 1;
      background-color: orange;
    }
    .right{
      height: 100px;
      margin-left: 50px;
      flex: 1;
      background-color: orange;
    }

第二题：栅栏布局

方案一：float实现

<!-- html部分 -->
  <div class="box">
    <div class="left"></div>
    <div class="right"></div>
    <div class="content"></div>
  </div>
   *{
         margin:0;
         padding:0;
        }
.left,
    .right {
      height: 400px;
      width: 130px;
      background-color: green;
    }

    .left {

      float: left;
      margin-right: 10px;
    }

    .right {
      
      float: right;
      margin-left: 10px;
    }

    .content {
      height: 400px;
      background-color: orange;
      overflow: hidden;
    }

方案二：position定位

<!-- html部分 -->
  <div class="box">
    <div class="left"></div>
    <div class="content"></div>
    <div class="right"></div>
  </div>
 /*  css部分*/
    *{
         margin:0;
         padding:0;
        }
    .box {
      position: relative;
    }

    .left,
    .right {
      position: absolute;
      top: 0;
      height: 400px;
      width: 130px;
      background-color: green;
    }

    .left {
      left: 0;
      margin-right: 10px;
    }

    .right {
      right: 0;
      margin-left: 10px;
    }

    .content {
      height: 400px;
      background-color: orange;
      margin: 0 145px;
    }

方案三：flex

<!-- html部分 -->
  <div class="box">
    <div class="left"></div>
    <div class="content"></div>
    <div class="right"></div>
  </div>
 /*  css部分*/
    *{
         margin:0;
         padding:0;
        }
    .box{
  display: flex;
}

.left, .right {
  height: 400px;
  width: 130px;
  background-color: green;
}

.left {
  margin-right: 10px;
}

.right {
  margin-left: 10px;
}

.content {
  flex: 1;
  height: 400px;
  background-color: orange;
}

方案四：grid实现

<!-- html部分 -->
  <div class="box">
    <div class="left"></div>
    <div class="content"></div>
    <div class="right"></div>
  </div>
/*  css部分*/
    *{
         margin:0;
         padding:0;
        }
    .box {
      display: grid;
      width: 100%;
      grid-template-rows: 500px;
      grid-template-columns: 130px auto 130px;
    }

    .left,
    .right {
      background-color: green;
    }

    .left {
      margin-right: 10px;
    }

    .right {
      margin-left: 10px;
    }

    .content {
      background-color: orange;
    }

方案五：table-cell

<!-- html部分 -->
  <div class="box">
    <div class="left"><p></p></div>
    <div class="content"></div>
    <div class="right"><p></p></div>
  </div>
/*  css部分*/
        *{
         margin:0;
         padding:0;
        }
    .box {
      display: table;
      width: 100%;
    }

    .left,
    .right {
      display: table-cell;
      height: 400px;
      width: 130px;
    }

    .left {
      border-right: 10px solid transparent;

    }

    .left>p {
      height: 100%;
      background-color: green;
      margin-top: 0;
      margin-bottom: 0;
    }

    .right {
      border-left: 10px solid transparent;

    }

    .right>p {
      height: 100%;
      background-color: green;
      margin-top: 0;
      margin-bottom: 0;
    }

    .content {
      display: table-cell;
      height: 400px;
      background-color: orange;
    }

三、switch开关 这个难搞哦！要有一定的功力

方案一:拉拽方式

<!-- html部分 -->
  <div class="box">
    <div class="ball"></div>
  </div>
/*  css部分*/
    .box {
  width: 100px;
  height: 50px;
  border: 1px solid #aaa;
  border-radius: 50px;
  transition: all .7s;
  cursor: pointer;
}

.ball {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #000;
  transition: all .7s;
}
<script>
  // js部分
  const ball = document.getElementsByClassName('ball')[0]
const box = document.getElementsByClassName('box')[0]
// 最大移动距离
const MaxLeft = 50
// ball的left值
let left = 0

ball.onmousedown = function(e) {
  // 鼠标点击时候，鼠标页面x轴位置
  let startX = e.clientX
  // 鼠标当前位置和点击位置差值
  let dX = 0

  document.onmousemove = function (e) {
    // 鼠标移动时候，x轴位置
    let nowX = e.clientX
    dX = nowX - startX
    // ball 的 left 计算结果
    let result = left + dX
    result = Math.min(result, MaxLeft)
    result = Math.max(0, result)
    ball.style.left = result + "px"
  }

  document.onmouseup = function () {
    document.onmousemove = null
    // 鼠标按键抬起后，left 值
    left = dX > 25 ? 50 : 0
    ball.style.left = left + "px"
    if (left === 50) {
      box.style.background = 'orange'
    } else {
      box.style.background = '#fff'
    }
  }
}
</script>

方案二：点击

<!-- html部分 -->
  <div class="box">
    <div class="ball"></div>
  </div>
/*  css部分*/
    .box {
  width: 100px;
  height: 50px;
  border: 1px solid #aaa;
  border-radius: 50px;
  transition: all .7s;
  cursor: pointer;
}

.ball {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #000;
  transition: all .7s;
}
 // js部分
  const ball = document.getElementsByClassName('ball')[0]
const box = document.getElementsByClassName('box')[0]
// 开关
let flag = false

box.onclick = function(e) {
  flag = !flag
  const left = flag ? 0 : 50
  const bgc = flag ? '#fff' : 'orange'

  ball.style.left = `${left}px`
  box.style.backgroundColor = bgc
}

方案三：纯css方式实现

<!-- html部分 -->
   <section class='model-15'>
    <label class='switch'>
      <input type='checkbox'>
      <span></span>
    </label>
  </section>
/* css部分 */
    .switch {
      width: 40px;
      height: 20px;
      border-radius: 30px;
      overflow: hidden;
      vertical-align: middle;
      position: relative;
      display: inline-block;
      background: #ccc;
      box-shadow: 0 0 1px #36a6d4;
    }

    .switch input {
      visibility: hidden;
    }

    .switch span {
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 50%;
      background: #fff;
      width: 50%;
      height: 100%;
      transition: all linear 0.2s;
    }

    .switch span::before {
      position: absolute;
      top: 0;
      left: -100%;
      content: '';
      width: 200%;
      height: 100%;
      border-radius: 30px;
      background: orange;
    }

    .switch span::after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: #fff;
    }

    .switch input:checked+span {
      transform: translateX(100%); 
    }

方案四：纯css方式实现

<!-- html部分 -->
      <div class="switch">
        <input id="input" class="toggle" type="checkbox">
        <label for="input"></label>
    </div>
/* css部分 */
*{
    margin: 0;
    padding: 0;
}
.switch{
    margin: 100px auto;
    width: 400px;
}
.toggle{
    position: absolute;
    margin-left: -9999px;
}
.toggle + label{
    display: block;
    position: relative;
    cursor: pointer;
}
input.toggle + label{
    width: 120px;
    height: 60px;
    background-color: #ddd;
    padding: 2px;
    border-radius: 60px;
}
input.toggle + label:before,
input.toggle + label:after{
    position: absolute;
    display: block;
    content: '';
    top: 1px;
    left: 1px;
    bottom: 1px;
    right: 0;
}
input.toggle + label:before{
    background-color: #f1f1f1;
    border-radius: 60px;
    transition: background 0.4s;
}
input.toggle + label:after{
    width: 60px;
    height: 60px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: margin 0.4s;
}
input.toggle:checked + label:before {
    background-color: orange;
}
input.toggle:checked + label:after{
    margin-left: 64px;
}

                                 12月17日的一次面试经历
            很是惊讶这些题之前在某篇文章看过，但是没有去实现，仔细回忆找不到原文出自哪里？
               不得不承认自己菜的一批，看到时没有思路，15分钟完成，但是还是要努力。
                                 还有一些问题明日再更。
                            每日一句：秉烛挑灯，为前程，又何妨。
                                         晚安
avatar
文章
阅读
粉丝