Notas CSS: muy detalladas, base cero, sucintas y fáciles de entender (3)

1 Estilo de interfaz de usuario CSS

• Cambiar el estilo del mouse del usuario

• esquema de formulario, etc.

• Evitar que los campos de formulario se arrastren

cursor estilo mouse

li {
    cursor: pointer; 
}

valor de atributo	describir
por defecto	blanco, predeterminado
puntero	mano diminuta
mover	mover
texto	texto
No permitido	prohibir

describir

 Agregue al formulario: contorno: 0; o contorno: ninguno; para eliminar el borde azul predeterminado

Evitar el cambio de tamaño del campo de texto de arrastrar y soltar

textarea {
    resize: none;
}

Atributos	usar	usar
estilo de ratón	Cambiar el cursor del estilo del mouse	Hay muchos estilos, recuerda el puntero.
línea de contorno	Esquema predeterminado del formulario	contorno Esquema, generalmente lo eliminamos directamente, el borde es el borde, a menudo usaremos
evitar arrastrar	Principalmente para cambiar el tamaño del campo de texto	Para evitar que los usuarios arrastren y suelten campos de texto a voluntad, causando confusión en el diseño de la página, cambiamos el tamaño: ninguno

2 alineación vertical alineación vertical

• Los elementos a nivel de bloque con ancho están centrados, margen: 0 automático;

• Deje que el texto esté centrado, es text-align: center;

vertical-align Alineación vertical, es solo para "elementos en línea" o "elementos de bloque en línea"

Alineación de imágenes, formularios y textos

Para los elementos de bloque en línea, como imágenes o formularios, la línea inferior se alineará con la línea base del cuadro principal. Es decir, habrá un espacio en blanco en la parte inferior de la imagen.

La solución es:  

• Dar img vertical-align:middle|top|bottom y así sucesivamente. Haga que la imagen no esté alineada con la línea de base.
• Agregue display: block to img; No habrá ningún problema para convertirlo en un elemento a nivel de bloque.

3 Visualización de puntos suspensivos de texto desbordante

espacio en blanco: normal ||  nowrap              texto-desbordamiento:  clip || elipsis

/* 1.先强制一行内显示文本 */
white-space: nowrap; 		/*默认 normal 是自动换行，nowrap是强制一行显示文本*/


/* 2.超出的部分隐藏 */
overflow: hidden;

/* 3.文字用省略号替代超出的部分*/
text-overflow: ellipsis;    
/* clip ；不显示省略标记（...），而是简单的裁切 */
/*ellipsis:省略号*/

Nota: asegúrese de forzar que se muestre en una línea primero y luego utilícelo con el atributo de desbordamiento nuevamente

4 Tecnología de sprites CSS (sprites)

Para reducir efectivamente la cantidad de veces que el servidor acepta y envía solicitudes, y mejorar la velocidad de carga de la página

explicación técnica

Los sprites de CSS en realidad integran algunas imágenes de fondo en la página web en una imagen grande (imagen de sprite). Sin embargo, cada elemento de la página web generalmente solo necesita una imagen pequeña en una posición diferente en la imagen de sprite. Para ubicar con precisión la imagen de sprite, una imagen pequeña

De esta manera, cuando el usuario visita la página, solo necesita enviar una solicitud al servicio y se pueden mostrar todas las imágenes de fondo de la página web.

Necesitamos usar CSS:

• imagen de fondo

• repetición de fondo

• atributo de posición de fondo para el posicionamiento de fondo

• El más crítico de estos es el uso de background-position atributos para apuntar con precisión

Resumen de la tecnología central de los elfos

Principalmente para la imagen de fondo, la imagen insertada img no necesita esta tecnología

• Medición precisa, tamaño y posición de cada pequeña imagen de fondo.

• Cuando se asigna una pequeña imagen de fondo al cuadro, el posicionamiento del fondo es básicamente un valor negativo.

5 consejos de diseño CSS

triángulo CSS

• Podemos simular el efecto de triángulo con borde css

• ancho alto es 0

• Tenemos que escribir los 4 bordes, solo mantener el color de borde requerido, y el resto no se puede omitir, solo cámbielos a transparente.

• Para cuidar los navegadores con poca compatibilidad, agregue tamaño de fuente: 0; altura de línea: 0

		div {
			/*我们用css 边框可以模拟三角效果*/
			width: 0;
			height: 0;
			border-top: 10px solid red;
			border-right: 10px solid green;
			border-bottom: 10px solid blue;
			border-left: 10px solid pink;
		}
		p {
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 10px;
			border-color:  transparent transparent transparent red;
			font-size: 0;
			line-height: 0;
		}

El uso de valores de margen negativos

• Agregue un borde de 1 px a los dos cuadros, flotante, y aparecerá 1 + 1 = 2 px si están muy juntos
• Añadir al cuadro de la derechamargin-left: -1px
• Los números positivos van a la derecha, los números negativos van a la izquierda

 Texto alrededor de elementos flotantes

 Uso inteligente de la función de que los elementos flotantes no abrumen el texto