CSS estilo común y estilo poco común

---

1. El mouse flotante se vuelve más pequeño

cursor: pointer

2. punto de eliminación ul

ul {
    
     list-style: none; } 

3. El texto desbordado muestra puntos suspensivos.

(1) Una línea de texto se desborda y muestra puntos suspensivos

.div{
    
    
	width: 100px;
	height: 20px;
	border: 1px solid red;
	white-space: nowrap;/* 强制文本在一行中显示 */
	overflow: hidden;/* 隐藏文本的超出部分 */
	text-overflow: ellipsis;/* 使用省略号代替文本超出部分 */
}

(2) El texto de varias líneas se desborda y muestra puntos suspensivos

.div{
    
    
 overflow: hidden;
  text-overflow: ellipsis;
  width: 200px;
  /* 将对象作为弹性伸缩盒子模型显示 */
  display: -webkit-box;
  /* 限制在一个块元素显示的文本的行数 */
  /* -webkit-line-clamp 其实是一个不规范属性，使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；*/
  -webkit-line-clamp: 2;
  /* 设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-box-orient: vertical;
}

4. Las palabras del texto exceden

(1) Palabras de texto más allá de los saltos de línea (ajuste de palabras)

El ajuste de palabras
normalsolo se ajusta en los puntos de interrupción permitidos (los navegadores mantienen el manejo predeterminado).
break-word Saltos de línea dentro de palabras largas o direcciones URL.

.div{
    
    
	word-wrap:break-word;
}

(2) La palabra de texto excede el salto de línea (ajuste de desbordamiento)

overflow-wrap: se utiliza para establecer si el navegador debe insertar saltos de línea en una cadena que de otro modo sería irrompible para evitar que el texto desborde su cuadro de línea.
normal: Las líneas sólo pueden dividirse en saltos de palabras normales (como espacios entre dos palabras).
anywhere: Para evitar el desbordamiento, las cadenas irrompibles, como palabras largas o URL, pueden ajustarse en cualquier momento si no hay otros puntos de interrupción aceptables en la línea. No se insertan guiones en los puntos de interrupción. La posibilidad de ajuste suave introducido por el ajuste de palabras se tiene en cuenta al calcular el tamaño intrínseco mínimo del contenido.
break-word: Igual que el valor de cualquier lugar, permite que las palabras normalmente irrompibles se ajusten en cualquier punto si no hay otros puntos de interrupción aceptables en la línea, pero no tiene en cuenta las oportunidades de ajuste suave introducidas por los saltos de palabras al calcular el tamaño intrínseco mínimo del contenido.

(3) Códigos CSS en inglés y chino para saltos de línea forzados y saltos sin línea (salto de palabra)

1. word-break:break-all; 只对英文起作用，以字母作为换行依据
2. word-wrap:break-word; 只对英文起作用，以单词作为换行依据
3. white-space:pre-wrap; 只对中文起作用，强制换行
4. white-space:nowrap; 强制不换行，都起作用
5. white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 不换行，超出部分隐藏且以省略号形式出现

5. Quitar flotante

Cuatro métodos comúnmente utilizados para eliminar la flotación. Los dos primeros tienen desventajas obvias, por lo que no hay ejemplos detallados.

(1) Método de etiqueta adicional: para alguien que borra el flotador, agregue una etiqueta en blanco adicional después.

Ventajas: Fácil de entender y fácil de escribir. (No recomendado)
Desventajas: se agregan muchas etiquetas sin sentido y la estructura es relativamente pobre.

(2) El padre agrega el método de desbordamiento

Se puede lograr un claro efecto flotante activando el BFC. Se debe definir el ancho o el zoom: 1, y la altura no se puede definir al mismo tiempo. Cuando se usa overflow:hidden, el navegador verificará automáticamente la altura del área flotante

(3) Utilice el pseudoelemento posterior para borrar el flotador (de uso común)

将类名clearfix 放到要去除浮动的父盒子上即可

/*伪元素是行内元素 正常浏览器清除浮动方法*/
.clearfix:after{
    
    
  content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}
.clearfix{
    
    
    *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

(4) Utilice pseudoelementos dobles antes y después para borrar los flotadores (de uso común)

将类名clearfix 放到要去除浮动的父盒子上即可

.clearfix:after,.clearfix:before{
    
    
   content: "";
    display: block;
    clear: both;
}

6. Imagen de fondo (de uso común: tamaño de fondo: portada)

Uso: tamaño de fondo: longitud|porcentaje|cubierta|contiene;
longitud establece la altura y el ancho de la imagen de fondo. El primer valor establece el ancho y el segundo valor establece la altura. Si solo se proporciona un valor, el segundo se establece en
porcentaje automático (automático), que calculará el porcentaje del área de posicionamiento en relación con el fondo. El primer valor establece el ancho y el segundo valor establece la altura. Cada valor está separado por un espacio para especificar la altura y el ancho, y por una coma, para especificar varios fondos. Si solo se proporciona un valor, el segundo se establece en
cobertura "automática", lo que mantiene la relación de aspecto de la imagen y escala la imagen al tamaño más pequeño que cubra completamente el área de posicionamiento del fondo.
luego contiene mantiene la relación de aspecto de la imagen y escala la imagen al tamaño más grande que quepa dentro del área de posicionamiento del fondo.

7. La imagen img se estira según el contenido (comúnmente usado: ajuste de objeto: portada/couter)

El relleno predeterminado no garantiza mantener la proporción original, el contenido se estira para llenar todo el contenedor de contenido. Pruébelo »
contiene Mantiene la proporción de tamaño original. El contenido está escalado. Pruébelo »
la cubierta mantiene la proporción de tamaño original. Sin embargo, es posible que se elimine parte del contenido. Pruébelo »
none mantiene la longitud y el ancho del contenido del elemento original, es decir, el contenido no se restablecerá. Pruébelo »
la reducción de escala mantiene la proporción de tamaño original. El tamaño del contenido es el mismo que ninguno o contiene, cualquiera de los dos da como resultado un tamaño de objeto más pequeño.

8. La primera línea tiene una sangría con dos caracteres chinos.

/* 字体x，text-indent 是字体的两倍就是缩进两个汉字 */
.div {
    
    
 font-size: 16px; 
 text-indent: 32px;
}

9. El color del cursor del campo de texto del cuadro de texto.

Lo principal es usar color de intercalación, no es necesario usar el selector de etiquetas como se muestra a continuación, también puedes usar el nombre de la clase.

/*设置文本框的光标位置*/
input[type=text] {
    
    
  caret-color: red;
}
/*设置文本区的光标位置*/
textarea {
    
    
  caret-color: red;
}

Artículo de referencia:
propiedad de ajuste de palabra: https://www.runoob.com/cssref/css3-pr-word-wrap.html
propiedad de ajuste de objeto: https://www.runoob.com/cssref/pr-object- fit.html
recomienda escribir mejores artículos escritos por object-fit: https://blog.csdn.net/Kindergarten_Sir/article/details/110477105