3 questions per day (22)

2020/3/25

problem

• html: Flex implements two-column layout
• css: talk about CSS selectors and the priority of these selectors
• js: Common asynchronous written test questions, please write the running results of the code

html: Flex implements two-column layout

  <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: talk about CSS selectors and the priority of these selectors

• !important
• Inline style (1000)
• ID selector (0100)
• Class selector / attribute selector / pseudo-class selector (0010)
• Element selector / relation selector / pseudo-element selector (0001)
• Wildcard selector (0000)

js: Common asynchronous written test questions, please write the running results of the code

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');

More detailed explanation on github