Las preguntas de la entrevista CSS más completas (incluidas las respuestas)

1. ¿Cuál es la diferencia entre visualización: ninguna y visibilidad: oculta?

display:none; desaparece completamente para liberar espacio. Puede provocar un reflujo (reorganización) de la página.

visibilidad: oculta; está oculta, pero la posición no se libera. Por ejemplo, opacidad: 0; no provoca el reflujo de la página.

2. Cómo calcular los valores de prioridad y peso de CSS

Estilos incrustados>Estilos internos>Estilos externos>Estilos importados

! importante > incrustado 1000 >Id 100 > clase=[]=pseudoclase 10 > etiqueta=pseudoelemento 1 > ( * + > ~) 0

3. Cómo activar BFC y el papel de BFC

BFC: contexto de formato de bloque contexto de formato de bloque, es un área de representación independiente. Especifica cómo está dispuesta la caja interna y no tiene nada que ver con el exterior de esta zona.

Activador: El valor de float no es none; el valor de position no es estático ni relativo; el valor de display es inline-block, block, table-cell, flex, table-caption o inline-flex; el valor de overflow es no visible.

Función: evitar la superposición de márgenes; adaptarse al diseño de dos columnas; flotar claramente.

4. Modelo de caja CSS

El modelo de caja consta de cuatro partes: margen, borde, relleno y contenido.

Tamaño del modelo de caja estándar = borde + relleno + contenido

Tamaño del modelo de caja extraño = contenido

Convertir modelo de caja extraño: box-sizing:border-box;

Convertir al modelo de caja estándar: box-sizing:content-box;

5. Cómo centrar un elemento horizontal y verticalmente

5.1 Caja flexible

.box{ 
  pantalla: flexionar; 
  justificar-contenido: centro; 
  alinear elementos: centro; 
}

5.2 Posicionamiento

.box{ 
  posición: relativa; 
} 
.box .sub{ 
  posición: absoluta; 
  arriba: 50%; 
  izquierda: 50%; 
  transformar: traducir(-50%, -50%); 
  /*margen-izquierda: mitad de ancho negativo* / 
  /*margen superior: la mitad de la altura negativa*/ 
}

6. CSS implementa un triángulo

.triángulo{ 
  ancho: 0; 
  altura: 0; 
  borde: 100px sólido transparente; 
  color del borde izquierdo: rojo; 
}

7. Cómo lograr un ancho fijo a la izquierda y un diseño adaptable a la derecha

7.1 Diseño del Santo Grial

<div id="contenedor"> 
  <div id="centro" clase="columna"></div> 
  <div id="izquierda" clase="columna"></div> 
  <div id="derecha" clase ="columna"></div> 
</div> 
#container { 
  padding-left: 200px; 
  relleno-derecha: 150px; 
} 
#contenedor .columna { 
  flotador: izquierda; 
} 
#centro { 
  ancho: 100%; 
} 
#izquierda { 
  ancho: 200px; 
  margen izquierdo: -100%; 
  posición: relativa; 
  derecha: 200px; 
} 
#derecha { 
  ancho: 150px; 
  margen derecho: -150px; 
}

7.2 Diseño de ala volante doble

  <div id="contenedor" clase="columna"> 
    <div id="centro"></div> 
  </div> 
  <div id="izquierda" clase="columna"></div> 
  <div id= "right" class="column"></div> 
  #container { 
    ancho: 100%; 
  } 
.columna
{ 
  flotador: izquierda; 
} 
        
#centro { 
  margen izquierdo: 200px; 
  margen derecho: 150px; 
} 
        
#izquierda { 
  ancho: 200px; 
  margen izquierdo: -100%; 
} 
        
#derecha { 
  ancho: 150px; 
  margen izquierdo: -150px; 
}

7.3 Disposición del contorno (falsa altura igual) márgenes interiores y exteriores complementarios

.parent{ 
  desbordamiento: oculto; 
} 
.izquierda, .derecha{ 
  margen inferior: -10000px; 
  fondo de relleno: 10000px; 
}

7.4 Caja flexible con diseño de igual altura (altura igual real)

.parent{ 
  pantalla: flexionar; 
} 
.niño{ 
  flexionar: 1; 
}

7.5、calcular

  <div id="izquierda" clase="columna"></div> 
  <div id="centro" clase="columna"></div> 
  <div id="derecha" clase="columna"></div > 
  .columna{ 
    flotante: izquierda; 
  } 
  #izquierda{ 
    ancho: 100px; 
  } 
  #derecha{ 
    ancho: 200px; 
  } 
  #centro{ 
    ancho: calc(100% - 100px - 200px); 
  }

7.6 Flotante

  <div id="izquierda" clase="columna"></div> 
  <div id="derecha" clase="columna"></div> 
  <div id="centro"></div> 
  #izquierda{ 
    flotante : izquierda; 
    ancho: 100px; 
  } 
  #derecha{ 
    flotador: derecha; 
    ancho: 200px; 
  } 
  #centro{ 
    margen izquierdo: 100px; 
    margen derecho: 200px; 
  }

8. Cómo implementar una fuente de 6px

.font{ 
  tamaño de fuente: 12px; 
  transformar: escala (.5); 
}

9. Cómo configurar un borde de 1px en un terminal móvil

/* Método 1 */ 
.border{ 
  ancho: 100%; 
  alto: 1px; 
  fondo: rojo; 
} 
/* Método 2 */ 
.border{ 
  border-image: url(border.png) 
} 
/* Método 3 */ 
. borde{ 
  box-shadow: 0 0 0 1px #000; 
}

10. ¿Qué son px, em, rem, vh y vw respectivamente?

px píxel físico, unidad absoluta; em es relativo a su propio tamaño de fuente. Si no tiene tamaño, es relativo al tamaño de fuente principal. Si el principal no tiene uno, busca hacia arriba capa por capa hasta encontrar html. Unidad relativa; rem es relativo al tamaño de fuente de html, unidades relativas; el tamaño de vh, relativo a la altura de la pantalla, unidades relativas; el tamaño de vw, relativo al ancho de la pantalla, unidades relativas.

11. ¿Cuáles son las propiedades heredables de CSS?

Atributos heredables: Clase de texto: sangría de texto, alineación de texto, altura de línea, espacio entre palabras, espacio entre letras, transformación de texto, dirección, color;

字体类: fuente, familia de fuentes, peso de fuente, tamaño de fuente, estilo de fuente, variante de fuente, extensión de fuente, ajuste de tamaño de fuente;

Opciones: visibilidad, lado del título, colapso del borde, espaciado del borde, celdas vacías, diseño de la tabla, tipo de estilo de lista, imagen de estilo de lista, posición de estilo de lista, estilo de lista, comillas, cursor 、página、salto de página interior、ventanas、huérfanos等

Las preguntas de la entrevista CSS más completas (incluidas las respuestas)

Supongo que te gusta