Lembrando CSS esquerdo, superior, direito, inferior

19

Ao usar CSS, quais pequenos truques você fez para se lembrar (talvez um ditado?) Da ordem esquerda, superior, direita e inferior ao definir atributos CSS combinados, como borda, margem e preenchimento.

Estou esquecendo para sempre e o Google parece cheio de lixo como o W3Schools.

css Mâtt Frëëman
fonte
6
Como o w3schools.com é "porcaria"? É mais fácil sobre os olhos para ler sua CSS3 Reference que o W3C CSS 3 Especificação documento ...
danlefree
8
@danlefree Consulte o W3Fools para obter uma longa lista de reclamações. (Embora eu não esteja ciente de que eles estão errados em algum lugar no que diz respeito a essa pergunta em particular.)
Su '20 de
Danlefee, veja a resposta de Su. O w3schools é um satanás na promoção de aprendizado e recursos em HTML / CSS / JS. Um movimento está em andamento para que a porcaria seja descartada da página 1 do google.
Mâtt Frëëman
2
Eu me pergunto por que ninguém mencionou o norte, leste, sul e oeste. É equivalente ao sentido horário, mas ei :).
21711 Kevin

Respostas:

24

Todos vão no sentido horário , começando do topo.

John Conde
fonte
4
Exceto o posicionamento em segundo plano (que parece um pouco relevante nesse caso), optando primeiro pelo deslocamento esquerdo e depois pelo deslocamento superior.
Marcel
@ Marcel, é verdade, o que explica por que sempre entendo errado dessa vez.
John Conde
o posicionamento em segundo plano é ordenado para x-ycoordenadas, o que é mais razoável quando você usa valores numéricos left top.
precisa saber é o seguinte
20

CSS é um problema. TRBL Superior-direito-inferior-esquerdo

Ray Mitchell
fonte
Bah, derrotado pelo soco. Um +1 esportivo.
Jon Purdy 21/05
8

Lembro-me visualizando uma face do relógio: começando às 12 horas (em cima), depois movendo-se para as 3 horas (à direita), depois às 6 horas (em baixo) e finalmente às 9 horas (à esquerda).

usuario
fonte
5

Além da analogia direta e direta, ofereço outro mnemônico: Superior, Direita, Inferior, Esquerda fornece o TRBL inicialismo , pronunciado terrível - ou problemas, se você quiser. (Ei, até os agudos me causam problemas como barítono.) Combina bem com o CRAP (Contraste, Repetição, Alinhamento, Proximidade), os quatro princípios do som Web design.

Jon Purdy
fonte
1
PORCARIA. Bem feito, senhor
Ray Mitchell
2

prática

Não me lembro de ter usado nenhum método especial de memorização para este pequeno petisco. Eu sei que aprendi que eles foram configurados no sentido horário a partir do topo, mas então comecei a escrever muito CSS.

Quando você executa uma tarefa repetidamente, há uma tendência de memorizar os detalhes de eficiência, portanto, neste ponto:

  1. todos
  2. superior e inferior direita e esquerda
  3. canto superior direito e esquerdo
  4. superior direito inferior esquerdo

é uma segunda natureza. Assim como:

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

e

background: <color> <image> <repeat> <attachment> <position>;
zzzzBov
fonte