Recordando CSS izquierda, arriba, derecha, abajo


19

Al usar CSS, ¿qué pequeños trucos has hecho para recordar (tal vez un dicho?) El orden de izquierda, arriba, derecha, abajo al definir atributos CSS combinados como borde, margen y relleno.

Lo estoy olvidando para siempre y Google parece estar lleno de basura como W3Schools.


66
¿Cómo es "basura" w3schools.com? Para los ojos es más fácil leer su referencia CSS3 que el documento de especificación W3C CSS 3 ...
danlefree

8
@danlefree Consulte W3Fools para obtener una larga lista de quejas. (Aunque no estoy al tanto de que estén equivocados en ninguna parte con respecto a esta pregunta en particular.)
Su '20 de

Danlefee, mira la respuesta de Su. w3schools es un satanás que promueve el aprendizaje y los recursos en HTML / CSS / JS. Se está realizando un movimiento para eliminar la basura de la página 1 google.
Mâtt Frëëman

2
Me pregunto por qué nadie mencionó Norte, Este, Sur, Oeste. Es equivalente a las agujas del reloj, pero oye :).
Kevin

Respuestas:


24

Todos van en sentido horario , comenzando desde arriba.


44
Excepto el posicionamiento de fondo (que parece un poco relevante en este caso), optando primero por el desplazamiento izquierdo y luego por el desplazamiento superior.
Marcel

@Marcel, muy cierto, lo que explica por qué siempre me equivoco esa vez la primera vez.
John Conde

El posicionamiento de fondo se ordena para las x-ycoordenadas, lo cual es más razonable cuando se utilizan valores numéricos, en lugar de left top.
zzzzBov


8

Lo recuerdo visualizando una esfera del reloj: comenzando a las 12 en punto (arriba), luego moviéndome a las 3 en punto (derecha), luego a las 6 en punto (abajo) y finalmente a las 9 en punto (izquierda).


5

Además de la analogía directa y sinuosa, ofrezco otra mnemotécnica: Superior, Derecha, Inferior, Izquierda da la inicialización TRBL , pronunciada terrible, o problemas si lo desea. (Oye, incluso los agudos me causan problemas como barítono). Encaja bien con CRAP (Contraste, Repetición, Alineación, Proximidad), los cuatro principios del diseño web de sonido.


1
MIERDA. Bien hecho, señor
Ray Mitchell

2

práctica

No recuerdo haber usado ningún método especial de memorización para este pequeño dato. Sé que aprendí que se configuraron en el sentido de las agujas del reloj desde la parte superior, pero luego procedí a escribir una gran cantidad de CSS.

Cuando realiza una tarea repetidamente, existe la tendencia a memorizar los detalles para la eficiencia, por lo que en este punto:

  1. todos
  2. arriba y abajo derecha e izquierda
  3. arriba derecha e izquierda abajo
  4. arriba a la derecha abajo a la izquierda

Es una segunda naturaleza. Al igual que:

border: <width> <style> <color>;

y

background: <color> <image> <repeat> <attachment> <position>;
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.