3 preguntas por día (22)

2020/3/25

El problema

• html: Flex implementa el diseño de dos columnas
• css: habla sobre los selectores CSS y la prioridad de estos selectores
• js: Preguntas de prueba escritas asíncronas comunes, escriba los resultados de ejecución del código

html: Flex implementa el diseño de dos columnas

  <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: habla sobre los selectores CSS y la prioridad de estos selectores

• !important
• Estilo en línea (1000)
• Selector de ID (0100)
• Selector de clase / selector de atributo / selector de pseudoclase (0010)
• Selector de elementos / selector de relaciones / selector de pseudoelementos (0001)
• Selector de comodines (0000)

js: Preguntas de prueba escritas asíncronas comunes, escriba los resultados de ejecución del código

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

Explicación más detallada sobre github