CSS mengelirukan? Anda tidak bersendirian

Apabila saya memulakan perjalanan saya dalam pembangunan web, sama seperti orang lain, saya bermula dengan asas: Belajar HTML kemudian CSS dan kemudian JavaScript. Saya hanya mahu membina sesuatu secepat mungkin, jadi saya hanya belajar cukup untuk membenarkan diri saya mula membina projek dan kemudian saya akan mencari perkara baharu apabila saya terjumpanya atau mendapati keperluan untuk melakukannya.
Satu kelebihan kaedah ini ialah saya dapat membina projek kecil dengan cepat, tetapi terdapat juga kelemahan besar dalam kaedah ini yang meninggalkan banyak jurang dalam pembelajaran.

Segera untuk membentangkan, saya sedang dalam proses mempelajari ReactJS dan saya menikmatinya, tetapi apabila melibatkan penggayaan komponen, ia hanya mengecewakan dan berlawanan dengan intuisi kerana CSS tidak begitu jelas kepada saya dalam kepala saya. Saya hanya akan menambah hartanah untuk mencapai hasil yang saya inginkan tetapi di suatu tempat di sepanjang jalan itu terasa seperti berjalan di atas jambatan purba menunggu untuk runtuh dengan satu langkah yang salah.

Ternyata, CSS tidaklah mengelirukan atau sukar seperti yang saya sangkakan. Sebenarnya, saya tidak mempunyai model mental yang betul untuk CSS.
Secara umum, orang menganggap CSS sebagai koleksi sifat (kunci: pasangan nilai) untuk mencapai rupa atau susunan yang diingini. Tetapi ini telah berubah sekarang untuk saya dan diharapkan untuk anda pada akhir artikel ini.

1. Jangan anggap CSS sebagai koleksi sifat. Sebaliknya, anggap CSS sebagai koleksi mod reka letak

• CSS terdiri daripada pelbagai algoritma reka letak yang berbeza, dipanggil mod reka letak.
• Setiap mod reka letak adalah seperti sub-bahasa sendiri dalam CSS yang boleh mentakrifkan semula dan mengubah cara sifat CSS digunakan. Dengan kata lain, sifat CSS adalah input kepada algoritma ini. Jadi, fokus pada cara algoritma ini menggunakan sifat ini daripada menghafal sekumpulan sifat.

2.Setiap reka letak direka untuk menyelesaikan masalah tertentu

• Mod reka letak lalai: Aliran Biasa, bertujuan untuk mencipta dokumen digital.
• Ia serupa dengan algoritma reka letak MS Word. iaitu. Tajuk & perenggan disusun secara menegak sebagai blok, manakala perkara seperti teks, pautan dan imej berada dalam blok ini.
• Selain daripada aliran Normal, dua mod reka letak lain yang paling kerap anda gunakan ialah reka letak Flexbox dan Grid.

3.Mod susun atur Kotak Flex dan Grid

• Sekali lagi, setiap mod susun atur dicipta untuk menyelesaikan masalah tertentu. Fikirkan dengan cara ini: Apakah masalah yang Flexbox selesaikan?

• Flexbox ialah mengenai menyusun sekumpulan item dalam satu baris atau lajur dengan fleksibiliti yang luar biasa dan kawalan ke atas cara setiap item diedarkan dan diselaraskan dalam kumpulan.

• Apakah masalah yang Grid selesaikan?
  Grid CSS memudahkan penyusunan dan penjajaran sekumpulan item dalam 2 dimensi. Ia memberi anda fleksibiliti dan kawalan ke atas setiap item individu, atau baris/lajur item untuk memanipulasi susunannya.

Sebaik sahaja anda mula memikirkan CSS dari segi pengumpulan mod reka letak dan cara ia mempengaruhi serta mengubah suai sifat CSS, anda mendapat model mental yang lebih jelas tentang bagaimana sesuatu berlaku walaupun CSS menjangkau banyak baris.

Atas ialah kandungan terperinci CSS mengelirukan? Anda tidak bersendirian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!