Resumen de preguntas de la entrevista (2) -CSS

Tabla de contenido

Modelo de caja CSS
Prioridad del selector de CSS
Flexionar
BFC
Posicionamiento
Fusión de margen
Flotador claro
img predeterminado en línea, pero puede establecer el ancho y la altura
Relleno de color de fondo
atributo calc
atributo de índice z
Redibujar y reorganizar
El método y la diferencia de ocultación de elementos.
La diferencia entre la etiqueta de enlace y la etiqueta de importación
La diferencia entre transición y animación.
La diferencia entre block, inline y inline-block
La diferencia entre la animación js y la animación css3
Diseño de tres columnas
Diseño de dos columnas
Centrar horizontal y verticalmente
Dibujar triángulos con CSS
Usa CSS para lograr el efecto de rotación del cubo
Puntos suspensivos de texto de elementos de varias líneas

Modelo de caja CSS

Modelo de caja de IE: Modelo de caja widht = padding + content + border
estándar: width = content
El box-sizeingmodelo de caja unificado introducido por CSS3

Prioridad del selector de CSS

Selector	Pesos
estilo	1000
identificación	0100
clase, pseudoclase, atributo	0010
Etiquetas, pseudo-elementos	0001
Comodines, sub-selectores, selectores adyacentes	0000

!important: La prioridad más alta, cuando un elemento tiene dos !importantal mismo tiempo, se utiliza el peso de cálculo.

La comparación de la adición de peso solo se aplica al mismo nivel, y no se aplica a niveles cruzados, como: 11 * class<1 *id

Flexionar

referencia

BFC

El contexto de formato a nivel de bloque es un área de representación independiente con ciertas reglas de diseño, que
se pueden usar para borrar flotantes, eliminar márgenes y fusionar

BFC es un contenedor independiente en la página, y los elementos secundarios no afectarán el exterior. Al
calcular la altura de BFC, los elementos flotantes también participarán en el cálculo.

Condiciones para generar BFC:

Elemento raíz
floatnoneElemento de inacción
positionElemento para fixedoabsolute
displayComo inline-block, table-cell, table-caption, flex, inline-flexelementos
overflowvisibleElemento de inacción

Posicionamiento

position: fixed: Posicionamiento relativo de la ventana del navegador
position: relative: no abandone el flujo del documento, ocupe su posición original
position: absolute: posicionamiento del elemento principal posicionado relativamente recientemente, si no es relativo <html>, el punto relativo es el elemento relativo paddinga la borderunión de la esquina superior izquierda
position: sticky: comience a seguir el diseño del flujo del documento , más que un fijo específico después del umbral
float:left: fuera del flujo del documento, absolutela diferencia es que el floattexto sin texto se ajustará

Fusión de margen

Los elementos del bloque (padre e hijo, hermanos) marginse superpondrán en la dirección vertical

El efecto de superposición es:
Los márgenes adyacentes son positivos y toman el valor máximo.
Los márgenes adyacentes son todos negativos y toman el mínimo.
Los márgenes adyacentes son uno positivo y uno negativo. Tome la suma de los dos

Flotador claro

añadirclear: both
Utilice BFC

img predeterminado en línea, pero puede establecer el ancho y la altura

La etiqueta img son elementos en línea de forma predeterminada, pero en sí misma son elementos reemplazables , por lo que CSS no controla el efecto. Es decir, CSS puede afectar la posición del elemento reemplazable, pero no afectará el contenido del elemento reemplazable en sí.

Alternativamente, los elementos tienen un ancho y alto construido, la naturaleza y la inline-blockconsistencia, el contenido de estos elementos no está dentro de la etiqueta al agregar una pantalla de texto, sino mediante una propiedad o JScontrol de pantalla

Los elementos reemplazables típicos son

iframe
video
empotrar
img

Relleno de color de fondo

Llenado content,, padding(noborder proporcionado por separado color)

atributo calc

Puede calcular cualquier longitud compatible con CSS, como: ancho: calc (100% -10px + 1rem);

atributo de índice z

Solo es aplicable a elementos de posicionamiento y determina la relación de cobertura entre elementos.
Reglas de posicionamiento:

El elemento principal determina el elemento secundario, es decir, el elemento principal es más pequeño que otros elementos y el elemento secundario es mayor de lo que no es válido.
Los valores negativos solo ocultan los elementos secundarios cuando el índice z del elemento principal: auto
Cuando los valores son los mismos, los elementos definidos posteriormente están en

Redibujar y reorganizar

Los cambios de DOM afectan el diseño de la página. Por ejemplo, los cambios en el ancho y la altura recalcularán las propiedades geométricas de los elementos, y otros elementos también se verán afectados. Por lo tanto, el navegador debe reconstruir el árbol de renderizado. Este proceso se llama reordenamiento.

El proceso por el cual el navegador vuelve a dibujar la parte afectada en la pantalla se llama redibujar

Redibujar no necesariamente conduce a un reordenamiento, el reordenamiento debe conducir a un reordenamiento

El método y la diferencia de ocultación de elementos.

opacity = 0: La transparencia es 0, el diseño no se cambiará y el evento se activará
visibility = hidden: la visibilidad está oculta, el diseño no se cambiará y el evento no se activará
display: none: el elemento no se renderizará, el diseño ser cambiado, y el evento no se activará

La diferencia entre la etiqueta de enlace y la etiqueta de importación

linkPertenece a la htmletiqueta, que @importse cssproporciona cuando el
se carga la página, que linkse cargará de forma sincronizada, y la @importreferencia cssse carga después se carga la página

Nota: El final de la carga de la página se refiere DOMa la finalización de la compilación, es decir DOMContentLoaded, se activa, no importa dónde esté @importescrito en el cssarchivo, es lo mismo

La diferencia entre transición y animación.

transitionNecesita un activador de eventos, animationno es necesario

La diferencia entre block, inline y inline-block

block: Ocupa una fila, llena automáticamente el elemento principal, puede establecer la marginsuma, la paddingaltura y el ancho
inline: no ocupará una fila solo, la widthsuma heightno será válida y la paddingsuma en la dirección vertical marginno será válida
inline-block: la pantalla es similar inline, y el contenido es similar block. Los elementos se mostrarán en una fila, el ancho, la altura y los márgenes se pueden configurar

La diferencia entre la animación js y la animación css3

Renderizar un hilo en un árbol main thready compositor thread
main threadmantenerlo mantiene un árbol, dos hilos pueden interferir entre síLayerTreeHost
compositor threadLayerTreeHostImpl

La animación CSS solo cambia si transformy opacitycuando la animación solo puede compositor threadcompletarse sin layoutypaint

Por lo tanto, en la mayoría de los escenarios de aplicación, los siguientes problemas merecen más atención desde la perspectiva de la eficiencia.

¿Causa?layout
repaintÁrea
¿Es un atributo de alto consumo ( css shadowetc.)
Ya sea para habilitar la aceleración de hardware

Diseño de tres columnas

Ancho fijo en ambos lados, adaptable en el medio
Representación del medio primero
Permita que cualquiera de las tres columnas sea la columna más alta

flexionar

.box {
    
    
	min-width: 500px;
	display: flex;
}
.left, .right {
    
    
	width: 100px;
}
.left {
    
    
    order: -1;
}
.center {
    
    
	flex: 1;
}

posición (no puede soportar la altura del elemento padre)

.box {
    
    
	position:relative;
}
.left, .right {
    
    
	width: 100px;
	position: absolute;
	top: 0;
}
.left {
    
    
	left: 0;
}
.right{
    
    
	right: 0;
}
.center {
    
    
	position: absolute;
	left: 100px;
	right: 100px;
}

flotador

.box {
    
    
	min-width: 500px;
    padding-left: 100px;
    padding-right: 100px;
    overflow: hidden;
}
.left, .right, .center {
    
    
    float: left;
}
.left, .right {
    
    
    width: 100px;
}
.center {
    
    
    width: 100%;
}
.left {
    
    
    margin-left: calc(-100px - 100%);
}
.right {
    
    
    margin-right: -100px;
}

Ahí tabley grid, con muy poco, estos efectos no son buenos, por no decir, de interés para encontrar los suyos.

Diseño de dos columnas

.box {
    
    
   overflow: hidden;
}
.left {
    
    
    width: 100px;
    height: 200px;
    float: left;
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}
.right {
    
    
    height: 400px;
    margin-left: 150px;
}

Centrar horizontal y verticalmente

Altura conocida:

paddingO margin+ BFC

vertical-align: middle; 
text-align: center; 
line-height: xxx;

Altura desconocida

display:flex; 
align-items:center; 
justify-content: center;

position: absolute; 
left: 50%; 
top:50%; 
transform: translateX(-50%) translateY(-50%);

position: absolute; 
top: 0; 
bottom: 0;
left: 0; 
right: 0; 
margin: auto

Dibujar triángulos con CSS

usarborder

.triangle {
    
    
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: red;
}

Usa CSS para lograr el efecto de rotación del cubo

Establecer en el elemento principal para transform-style: preserve-3dque el elemento secundario tenga un efecto 3D.
Defina seis caras y utilícelas transformpara construir un cubo en el espacio.
Use @keyframeo transitiondefina la animación para lograr la rotación

.main{
    
    
    height: 500px;
    width: 500px;
    position: absolute;
    left: 50%;
    top: 50%;
    border:0 solid black;
    transform: translate(-50%,-50%) rotateX(30deg) rotateY(30deg);
    transform-style: preserve-3d;
}
.main div{
    
    
    position: absolute;
    left: 50%;
    top: 50%;
    height: 250px;
    width: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 60px;
    font-weight: bold;
}
.main:hover{
    
    
    transform: translate(-50%,-50%)  rotateX(145deg) rotateY(45deg) rotateZ(105deg);
    transition: all 5s;
}
.face1{
    
    
    background-color: pink;
    transform:translate(-50%,-50%) translateY(-125px) rotateX(90deg);
}

.face2{
    
    
    background-color: red;
    transform:translate(-50%,-50%) translateX(-125px) rotateY(90deg);
}

.face3{
    
    
    background-color: blue;
    transform:translate(-50%,-50%) translateZ(-125px);
}

.face4{
    
    
    background-color: yellow;
    transform:translate(-50%,-50%) translateY(125px) rotateX(90deg);
}

.face5{
    
    
    background-color: green;
    transform:translate(-50%,-50%) translateX(125px) rotateY(90deg);
}

.face6{
    
    
    background-color: orange;
    transform:translate(-50%,-50%) translateZ(125px);
}
<div class="main">
    <div class="face1">1</div>
    <div class="face2">2</div>
    <div class="face3">3</div>
    <div class="face4">4</div>
    <div class="face5">5</div>
    <div class="face6">6</div>
</div>

Puntos suspensivos de texto de elementos de varias líneas

display: -webkit-box
-webkit-box-orient:vertical
-webkit-line-clamp:3
overflow:hidden

Dibuja un cuadrado receptivo

.box {
    
    
   display: inline-block; // block会发生外边距合并
    position: relative;
    width: 100%;
}
.box > div {
    
    
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: red;
}
.box:after {
    
    
    content: '';
    display: block;
    width: 100%;
    margin-top: 100%;
}
<div class="box">
    <div></div>
</div>