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.

css Mâtt Frëëman
fuente
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.

John Conde
fuente
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
20

CSS es un problema. TRBL Superior-Derecha-Inferior-Izquierda

Ray Mitchell
fuente
Bah, golpeado hasta el golpe. Un deportivo +1.
Jon Purdy
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).

Mella
fuente
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.

Jon Purdy
fuente
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>;
zzzzBov
fuente