Preguntas de la entrevista inicial: css

Hablar sobre el modelo de caja css

Hay dos tipos de modelos de caja: el modelo de caja estándar de uso común y el modelo de caja IE que rara vez se usa. El modelo de caja
estándar incluye contenido (ancho, alto), relleno, margen, borde

Modelo de caja de IE, contenido {ancho (relleno, borde); altura;} margen. El ancho en el modelo de caja ie contiene su relleno y aburridor.

La propiedad box-sizing se introdujo en css3 y es el modelo estándar cuando el valor es content-box. El cuadro de borde de valor es el modelo de cuadro ie

Dibuja una línea de 0.5px

El primero usa el escalado de pantalla.

<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>

这中方式之在移动端生效，viewport之咋移动端生效，其原理就是让屏幕缩小一半  1px就变成了0.5px

El segundo método:
use la función de zoom de css:

transform: scale(0.5,0.5);

La diferencia entre las etiquetas de enlace y las etiquetas de importación

El enlace de problemas de recursos de carga
no solo puede cargar css sino también definir los atributos de conexión rss y rel. @import solo puede cargar el enlace
de problemas de compatibilidad css
es etiquetas html sin problemas de compatibilidad. La incompatibilidad de @import2.1 con IE5 e inferior.
El problema de la secuencia de carga.
Los enlaces se cargan juntos cuando se carga la página. @import controlará el
problema en js en casa después de cargar la página.

La diferencia entre transición y animación.

El mismo punto puede cambiar el valor del atributo con el cambio de tiempo,
la diferencia es que la transición necesita iniciar activamente el cambio del atributo y luego volver a tener el mismo efecto que la animación. (Transición) En términos de la cantidad de cuadros, solo hay dos cuadros. La forma de
animación se llama animación. Puede cambiar el valor del atributo sin tomar la iniciativa para comenzar. La cantidad de cuadros se puede cambiar cuadro por cuadro.

Diseño flexible

flex es Flexible Box significa diseño elástico. Los navegadores Webkit deben tener el prefijo -webkit

.box{
    
    
  display: -webkit-flex; /* Safari */
  display: flex;
}

Atributos de diseño:
dirección flexible: determina la dirección del eje principal envoltura flexible
: determina la dirección de la envoltura de línea o si se ajustan las líneas
flujo flexible: es la abreviatura de las dos direcciones flexibles anteriores || Cómo alinear. (alineación superior, alineación inferior, centrado, alineación de extensión superior e inferior y alineación horizontal) align-content: el atributo define la alineación de múltiples ejes. Esta propiedad no tiene efecto si el elemento tiene un solo eje. (alineación superior, alineación inferior, centrado, alineación de estiramiento superior e inferior, alineación horizontal)

tutorial de diseño flexible

BFC (contexto de formato a nivel de bloque, utilizado para borrar flotantes, evitar márgenes superpuestos, etc.)

触发条件：
根元素：html
float属性不为none，
overfloat不为visible，
display不为table-cell、table-caption 和inlink-block
position；不为 resolve和fixed

BFC es un área independiente, un contenedor aislado, y los elementos secundarios no se verán afectados por elementos externos.
1. Puede evitar que los elementos queden cubiertos por elementos flotantes
2. Puede contener elementos flotantes
3. Elementos que pertenecen al mismo BFC

Los márgenes se superpondrán y establecer diferentes BFC para los elementos secundarios puede solucionar el problema.

El método de centrado vertical.

margen: automático

<style>
	.div{
      
      
		position:absolute;
		width:100px;
		height:100px;
		top:0;
		left:0;
		right:0;
		bottom:0
		margin:auto
	}
</style>
<div class="div"></div>

margen negativo

<style>
	.div{
      
      
		width:100px;
		height:100px;
		position:absolute;
		top:50%;
		left:50%;
		margin-left:-50px;
		margin-top:-50px;
	}
</style>
<div class="div"></div>

Puntos suspensivos de texto para elementos de varias líneas

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

flotar claro

1. Agregue una nueva etiqueta vacía para establecer el atributo claro: ambos
después del elemento flotante

	<style>
		.clear{
      
      
			clear:both
		}
	</style>
	<div class="clear"></div>

La desventaja agregará etiquetas sin sentido
2. Use overflow
para agregar al elemento principal del elemento flotante, ya sea overflow:hidden o overflow:auto puede borrar el flotante siempre que su valor no sea visible, su esencia es construir un BFC, para lograr el efecto de soportar la altura del elemento principal 3. Establezca la altura para que el elemento principal admita el elemento principal 4. Establezca el elemento de pseudoclase para el elemento
principal
:
después

.div:afert{
    
    
	content:'';
	height:0;
	line-height:0;
	display:block;
	visibility:hidden;
	clear:both
}

Se agrega un pseudoelemento :after al elemento principal. Al borrar el elemento flotante del pseudoelemento, se logra la altura del elemento principal.

atributo de cálculo

Es un atributo calculado de css, se puede calcular cualquier valor de longitud, y se debe tener en cuenta que debe haber espacios antes y después del operador.

	.div{
    
    
		width: calc(100% - 10px);
	}

Prioridad de los selectores css

1. !import tiene la prioridad más alta
2. estilo de estilo en línea
3. selector de identificación
4. seleccionador de clase
5. selector de etiquetas
6. selector comodín
7. Personalizado o heredado por el navegador, el estilo
   de peso correspondiente es 1000, la identificación es 100, la categoría es 10 y la etiqueta es 1