Mengingat CSS kiri, atas, kanan, bawah

19

Saat menggunakan CSS trik kecil apa yang telah Anda lakukan untuk mengingat (mungkin pepatah?) Urutan kiri, atas, kanan, bawah ketika mendefinisikan atribut CSS gabungan seperti border, margin dan padding.

Saya selamanya lupa dan Google tampaknya dipenuhi dengan omong kosong seperti W3Schools.

css Pak Freman
sumber
6
Bagaimana w3schools.com "omong kosong"? Lebih mudah di mata untuk membaca Referensi CSS3 mereka daripada dokumen Spesifikasi W3C CSS 3 ...
danlefree
8
@danlefree Lihat W3Fools untuk daftar panjang keluhan. (Meskipun saya tidak menyadari bahwa mereka salah di mana pun sehubungan dengan pertanyaan khusus ini.)
Su '20
Danlefee, lihat respons Su. w3schools adalah setan dalam mempromosikan pembelajaran dan sumber daya tentang HTML / CSS / JS. Sebuah gerakan sedang berlangsung untuk menghapus omong kosong dari halaman 1 google.
Mâtt Frëëman
2
Saya bertanya-tanya mengapa tidak ada yang menyebut Utara, Timur, Selatan, Barat. Ini setara dengan searah jarum jam, tapi hei :).
Kevin

Jawaban:

24

Mereka semua berjalan searah jarum jam , mulai dari atas.

John Conde
sumber
4
Kecuali pemosisian latar belakang (yang tampaknya sedikit relevan dalam kasus ini), memilih offset kiri terlebih dahulu, lalu offset kedua atas.
Marcel
@ Marscel, sangat benar, yang menjelaskan mengapa saya selalu salah dalam hal pertama kali.
John Conde
penentuan posisi latar belakang diperintahkan untuk x-ykoordinat yang lebih masuk akal ketika Anda menggunakan nilai numerik, daripada left top.
zzzzBov
20

CSS adalah masalah. TRBL Atas-Kanan-Bawah-Kiri

Ray Mitchell
sumber
Bah, dipukuli sampai habis. +1 yang olahraga.
Jon Purdy
8

Saya ingat dengan memvisualisasikan tampilan jam: mulai jam 12 (atas), kemudian pindah ke jam 3 (kanan), kemudian jam 6 (bawah) dan akhirnya jam 9 (kiri).

Nick
sumber
5

Selain analogi belitan langsung, saya menawarkan mnemonik lain: Atas, Kanan, Bawah, Kiri memberikan inisialisasi TRBL , diucapkan mengerikan - atau masalah jika Anda suka. (Hei, bahkan treble memberi saya masalah sebagai bariton.) Sangat cocok dengan CRAP (Kontras, Pengulangan, Alignment, Kedekatan), empat prinsip desain Web yang bagus.

Jon Purdy
sumber
1
SAMPAH. Bagus, tuan
Ray Mitchell
2

praktek

Saya tidak ingat pernah menggunakan metode penghafalan khusus untuk berita gembira kecil ini. Saya tahu saya tahu mereka diatur dalam urutan searah jarum jam dari atas, tapi kemudian saya mulai menulis banyak CSS.

Ketika Anda melakukan tugas berulang kali ada kecenderungan untuk menghafal detail untuk efisiensi, jadi pada titik ini:

  1. semua
  2. atas & bawah kanan & kiri
  3. kanan atas & kiri bawah
  4. kanan atas, kiri bawah

adalah sifat kedua. Seperti:

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

dan

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