Autor: Matt Maribojoc
Traductor: Front-end Xiaozhi
Fuente: stackabuse
El código fuente de Vue3 ya está disponible: en la entrevista, si tiene miedo de que le pregunten sobre el código fuente de Vue, o si desea mostrarle al entrevistador su propio código fuente de Vue, puede obtener información al respecto.
Modifique el estilo del marcador de posición, el desbordamiento de texto de varias líneas, oculte la barra de desplazamiento, modifique el color del cursor, centre horizontal y verticalmente. ¡Estos escenarios familiares! Los desarrolladores front-end se enfrentan a ellos casi todos los días, aquí hay 20 trucos de CSS, echemos un vistazo.
1. Resuelva el problema del espaciado img 5px
¿A menudo se encuentra con 5pel problema del espacio x adicional en la parte inferior de la imagen? No se preocupe, aquí hay 4 formas de solucionarlo.
Opción 1: establezca el tamaño de fuente del elemento principal en 0
Clave:
.img-container{
font-size: 0;
}
Dirección del caso: https://codepen.io/qianlong/pen/VwrzoyE
Escenario 2: establezca el elemento img endisplay: block
Clave:
img{
display: block;
}
Dirección del caso: https://codepen.io/qianlong/pen/eYeGONM
Escenario 3: establezca el elemento img envertical-align: bottom
Clave:
img{
vertical-align: bottom;
}
Dirección del caso: https://codepen.io/qianlong/pen/jOaGNWw
Solución 4: establezca el elemento principalline-height: 5px
Clave:
.img-container{
line-height: 5px;
}
Dirección del caso: https://codepen.io/qianlong/pen/PoOJYzN
2. La altura del elemento es la misma que la altura de la ventana
¿Cómo puedo hacer que el elemento sea tan alto como la ventana? responder usandoheight: 100vh;
Dirección del caso: https://codepen.io/qianlong/pen/xxPXKXe
3. Modificar el estilo del marcador de posición de entrada
Clave:
.placehoder-custom::-webkit-input-placeholder {
color: #babbc1;
font-size: 12px;
}
Dirección del caso: https://codepen.io/qianlong/pen/JjOrPOq
4. Usa el :notselector
Todos menos el último elemento necesitan algo de estilo, lo cual es muy fácil de hacer con los notselectores .
Como se muestra en la imagen a continuación: El último elemento no tiene borde inferior.
clave
li:not(:last-child) {
border-bottom: 1px solid #ebedf0;
}
Dirección del caso: https://codepen.io/qianlong/pen/QWOqLQO
5. Use el diseño flexible para anclar inteligentemente un elemento al fondo
Cuando no hay suficiente contenido, el botón debe estar en la parte inferior de la página. Cuando hay suficiente contenido, el botón debe seguir al contenido. Cuando tenga un problema similar, utilícelo flexpara lograr un diseño inteligente.
Dirección del caso: https://codepen.io/qianlong/pen/ZEaXzxM
6. Use caret-colorpara cambiar el color del cursor
Puede utilizar caret-colorpara modificar el color del cursor de la siguiente manera:
caret-color: #ffd476;
Dirección del caso: https://codepen.io/qianlong/pen/YzErKvy
7. Elimine la flecha al type="number"final de
De forma predeterminada, type="number"aparece una pequeña flecha al final, pero a veces debemos eliminarla. ¿Qué debemos hacer?
Clave:
.no-arrow::-webkit-outer-spin-button,
.no-arrow::-webkit-inner-spin-button {
-webkit-appearance: none;
}
Dirección del caso: https://codepen.io/qianlong/pen/OJOxLrg
8. outline:noneEliminar la línea de estado de entrada
Cuando se selecciona el cuadro de entrada, tendrá una línea de estado azul de forma predeterminada, que se outline: nonepuede .
Como se muestra en la siguiente figura: el segundo cuadro de entrada se elimina, el primer cuadro de entrada no se elimina.
Dirección del evento: https://codepen.io/qianlong/pen/YzErzKG
9. Resuelva el problema de que la barra de desplazamiento de iOS está atascada
En los iPhone, a menudo sucede que los elementos se atascan al desplazarse. En este caso, puede usar el siguiente CSS para admitir el desplazamiento elástico.
body,html{
-webkit-overflow-scrolling: touch;
}
10. Dibuja el triángulo
.box {
padding: 15px;
background-color: #f5f6f9;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
}
.triangle {
display: inline-block;
margin-right: 10px;
/* Base Style */
border: solid 10px transparent;
}
/*下*/
.triangle.bottom {
border-top-color: #0097a7;
}
/*上*/
.triangle.top {
border-bottom-color: #b2ebf2;
}
/*左*/
.triangle.left {
border-right-color: #00bcd4;
}
/*右*/
.triangle.right {
border-left-color: #009688;
}
Dirección del caso: https://codepen.io/qianlong/pen/rNYGNRe
11. Dibuja flechas pequeñas,
Clave:
.box {
padding: 15px;
background-color: #ffffff;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
}
.arrow {
display: inline-block;
margin-right: 10px;
width: 0;
height: 0;
/* Base Style */
border: 16px solid;
border-color: transparent #cddc39 transparent transparent;
position: relative;
}
.arrow::after {
content: "";
position: absolute;
right: -20px;
top: -16px;
border: 16px solid;
border-color: transparent #fff transparent transparent;
}
/*下*/
.arrow.bottom {
transform: rotate(270deg);
}
/*上*/
.arrow.top {
transform: rotate(90deg);
}
/*左*/
.arrow.left {
transform: rotate(180deg);
}
/*右*/
.arrow.right {
transform: rotate(0deg);
}
Dirección del caso: https://codepen.io/qianlong/pen/ZEaXEEP
12. Tamaño de ventana de ajuste de imagen
Dirección del caso: https://codepen.io/qianlong/pen/PoOJoPO
13. Ocultar barra de desplazamiento
La primera barra de desplazamiento está visible y la segunda barra de desplazamiento está oculta. Esto significa que el contenedor se puede desplazar, pero la barra de desplazamiento se oculta como si fuera transparente.
Clave:
.box-hide-scrollbar::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
Dirección del caso: https://codepen.io/qianlong/pen/yLPzLeZ
14. Personaliza el estilo de texto seleccionado
Clave:
.box-custom::selection {
color: #ffffff;
background-color: #ff4c9f;
}
Dirección del caso: https://codepen.io/qianlong/pen/jOaGOVQ
15. Selección de texto no permitida
Clave:
.box p:last-child {
user-select: none;
}
Dirección del caso: https://codepen.io/qianlong/pen/rNYGNyB
16. Centrar un elemento horizontal y verticalmente
Clave:
display: flex;
align-items: center;
justify-content: center;
Dirección del caso: https://codepen.io/qianlong/pen/VwrMwWb
17. Muestra puntos suspensivos cuando el texto de una sola línea se desborda
Clave:
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 375px;
Dirección del caso: https://codepen.io/qianlong/pen/vYWeYJJ
18. Muestra puntos suspensivos cuando el texto de varias líneas se desborda
Clave:
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
/* set n lines, including 1 */
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
Dirección del caso: https://codepen.io/qianlong/pen/ZEaXEJg
19. Usa "filter:grayscale(1)" para hacer que la página esté en modo gris.
Clave:
body{
filter: grayscale(1);
}
Los errores que pueden existir después de que se implementa el código no se pueden conocer en tiempo real. Para resolver estos errores después, se dedica mucho tiempo a la depuración de registros. Por cierto, recomiendo una útil herramienta de monitoreo de errores , Fundebug .
Original: https://javascript.plainenglish.io/20-css-tips-and-tricks-to-make-you-a-better-developer-d80ae5c09617
comunicarse con
Si tiene sueños y productos secos, puede buscar [Great Move to the World] en WeChat y prestar atención a este Shawanzhi que todavía está lavando platos en las primeras horas de la mañana.
Este artículo se ha incluido en GitHub https://github.com/qq449245884/xiaozhi, y hay sitios de prueba completos, materiales y mi serie de artículos para entrevistas con fabricantes de primera línea.
