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.


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.


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


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).


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.


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>;
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.