一. CSS

flex布局初始效果：

理想效果：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .container {
        width: 250px;
        height: 500px;
        border: 1px solid black;
    }

    .box {
        width: 50px;
        height: 50px;
        background-color: red;
        margin: 10px;
    }
</style>

<body>
    <div class="container">

    </div>
</body>
<script>
    window.onload = function () {
        const container = document.getElementsByClassName('container')[0]
        let appendChildren = '' 
        for (let i = 0; i < 100; i++) {
            appendChildren += '<div class="box"></div>' 
        }
        container.innerHTML = appendChildren
    }
</script>

</html>

答案：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .container {
        width: 250px;
        height: 500px;
        border: 1px solid black;
        display: flex;
        flex-wrap: wrap;
        overflow-y: auto;
        justify-content: flex-start;
    }

    .box {
        width: 50px;
        height: 50px;
        margin-left: 10px;
        background-color: red;
        margin-top: 5px;
    }
</style>

<body>
    <div class="container">

    </div>
</body>
<script>
    window.onload = function () {
        const container = document.getElementsByClassName('container')[0]
        let appendChildren = '' 
        for (let i = 0; i < 101; i++) {
            appendChildren += '<div class="box"></div>' 
        }
        container.innerHTML = appendChildren
    }
</script>

</html>

进阶的FLEX 初始效果：

理想效果：

题目：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .container {
        width: 250px;
        height: 500px;
        border: 1px solid black;
    }

    .content {
    }
</style>

<body>
    <div class="container">
        <div>
            <h1>title</h1>
        </div>
        <div>
            <h4>subtitle</h4>
        </div>
        <div class="content">
            content
        </div>
    </div>
</body>
</script>

</html>

固定标题，内容居中答案

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .container {
        width: 250px;
        height: 500px;
        border: 1px solid black;
        display: flex;
        flex-direction: column;
    }

    .content {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1 0 0;
    }
</style>

<body>
    <div class="container">
        <div>
            <h1>title</h1>
        </div>
        <div>
            <h4>subtitle</h4>
        </div>
        <div class="content">
            content
        </div>
    </div>
</body>
</script>

</html>

二. HTML

为什么有那么多的标签

三. 编程

1. 实现数组的reduce方法

2. 异步加法（较难，若果做出来了可以直接过）

题目：

const asyncAdd = (num1, num2, callback) => { 
    setTimeout(() => { 
        try { 
            callback(null, num1 + num2) 
        } catch (error) { 
            callback(error, null) } 
     }, 500) 
}

c1onst asyncAdd = (num1, num2, callback) => {
  setTimeout(() => {
    try {
      callback(null, num1 + num2)
    } catch (error) {
      callback(error, null)
    }
  }, 500)
}

function add() {
  const arrs = Array.prototype.slice.call(arguments)

  function getAsyncAddResult(num1, num2) {
    return new Promise(resolve => {
      asyncAdd(num1, num2, (error, result) => {
        resolve(result)
      })
    })
  }

  const result = arrs.reduce((prev, current) => {
    return prev.then(v => {
      return new Promise(resolve => {
        getAsyncAddResult(v, current).then(v2 => {
          resolve(v2)
        })
      })
    })
  }, Promise.resolve(0))

  return result
}

add(5, 6, 7).then(v => {
  console.log(v)
})

优化版

const asyncAdd = (num1, num2, callback) => {
  setTimeout(() => {
    try {
      callback(null, num1 + num2)
    } catch (error) {
      callback(error, null)
    }
  }, 500)
}

function add() {
  const arrs = Array.prototype.slice.call(arguments)

  function getAsyncAddResult(num1, num2) {
    return new Promise(resolve => {
      asyncAdd(num1, num2, (error, result) => {
        resolve(result)
      })
    })
  }

  const promiseArray = []
  for (let i = 0; i < (arrs.length - 1) / 2; i++) {
    promiseArray.push(getAsyncAddResult(arrs[i], arrs[arrs.length - i - 1]))
  }
  if (arrs.length % 2 !== 0) {
    promiseArray.push(Promise.resolve(arrs[(arrs.length - 1) / 2]))
  }
  return Promise.all(promiseArray).then(resultValue => {
    return resultValue.reduce((prev, current) => prev + current, 0)
  })
}
add(0, 1, 3, 7, 8, 234).then(v => console.log(v))

面试题

一. CSS

二. HTML

三. 编程

1. 实现数组的reduce方法

2. 异步加法（较难，若果做出来了可以直接过）

2. 023