每日3题(22)

2020/3/25

问题

• html:Flex实现两列布局
• css:说说CSS选择器以及这些选择器的优先级
• js:常见异步笔试题，请写出代码的运行结果

html:Flex实现两列布局

  <style>
    .box {
      height: 200px;
      display: flex;
    }

    .box>div {
      height: 100%;
    }

    .box-left {
      width: 200px;
      background-color: blue;
    }

    .box-right {
      flex: 1;
      /* 设置flex-grow属性为1，默认为0 */
      overflow: hidden;
      background-color: red;
    }
  </style>
  <div class="box">
    <div class="box-left"></div>
    <div class="box-right"></div>
  </div>

css:说说CSS选择器以及这些选择器的优先级

• !important
• 内联样式（1000）
• ID选择器（0100）
• 类选择器/属性选择器/伪类选择器（0010）
• 元素选择器/关系选择器/伪元素选择器（0001）
• 通配符选择器（0000）

js:常见异步笔试题，请写出代码的运行结果

async function async1() {
    console.log('async1 start');
    await async2();
    console.log('async1 end');
}
async function async2() {
	console.log('async2');
}

console.log('script start');

setTimeout(function() {
    console.log('setTimeout');
}, 0)

async1();

new Promise(function(resolve) {
    console.log('promise1');
    resolve();
}).then(function() {
    console.log('promise2');
});
console.log('script end');

github更详细的解释