3 perkara (hampir) tidak ada yang tahu mengenai CSS

ujian tips CSS: Adakah anda benar -benar memahami CSS?

Kajian Titik Utama

• Cara terbaik untuk menetapkan ketinggian garis berganda ialah menggunakan nombor tanpa unit (mis. 2), supaya unsur -unsur kanak -kanak dengan saiz fon yang berbeza dapat mewarisi nisbah ketinggian garis yang betul.
• Walaupun salah tanggapan umum bahawa z-index sendiri menyebabkan pertindihan, unsur -unsur HTML sebenarnya boleh bertindih oleh atribut margin (terutamanya menetapkan margin negatif).
• Pseudo-elemen dan kelas pseudo adalah ciri-ciri yang sangat berbeza dalam CSS: kelas pseudo digunakan untuk unsur-unsur HTML yang sebenarnya di bawah keadaan tertentu, dan elemen pseudo membolehkan gaya bahagian dokumen yang bukan unsur HTML yang sebenarnya.
• w3c cuba membezakan antara elemen pseudo dan kelas pseudo dalam spesifikasi pemilih CSS3 dengan menggunakan dua kolon (::first-line) untuk pemilih pseudo-elemen dan satu kolon (:hover) untuk pemilih pseudo-element, tetapi dalam Perintah ke backcompatibility, penyemak imbas mesti menyokong kedua -dua versi.

Adakah anda fikir anda mahir dalam CSS? Sekiranya keputusan ujian CSS percuma yang saya sediakan dalam talian selama enam bulan yang lalu adalah apa -apa rujukan, banyak pemaju berpengalaman tidak tahu banyak tentang CSS seperti yang mereka fikirkan. Daripada lebih daripada 3,000 orang yang telah mengambil bahagian dalam ujian setakat ini, skor purata hanya 55%.

Walau bagaimanapun, purata itu sendiri tidak begitu menarik. Saya ingin mengetahui lebih lanjut mengenai di mana orang salah. Untuk menulis artikel ini, saya menganalisis data dan memberi tumpuan kepada tiga isu di mana orang menjaringkan sangat rendah. Saya akan menerangkan setiap soalan satu demi satu, tunjukkan jawapan yang kebanyakan orang memilih, dan jelaskan jawapan yang betul.

Adalah selamat untuk mengatakan bahawa jika anda mengambil ujian sendiri selepas membaca artikel ini, anda akan mempunyai kelebihan yang tidak adil!

Masalah 1: Cara terbaik untuk menetapkan ketinggian garis

Soalan pertama harus mudah bagi orang yang bekerja pada gaya teks dengan kerap:

Anda mahu teks di laman web menjadi dua talian tinggi secara lalai. Nilai -nilai berikut

yang manakah cara terbaik untuk mencapai matlamat ini? line-height

• 200%
• 2em
• 2
• Terdapat empat jawapan untuk dipilih, dan anda mengharapkan 25% orang akan menjawab dengan betul dengan nasib, tetapi hanya 31% akan menjawab soalan ini dengan betul! Luangkan sedikit masa untuk memilih jawapan untuk diri sendiri dan teruskan membaca. double
Pertama sekali,

adalah gangguan.

Satu -satunya nilai kata kunci yang diterima ialah

. Saya gembira untuk mengatakan bahawa hanya 9% orang memilih pilihan ini. Tiga jawapan yang lain sangat popular.

Jawapan yang kebanyakan orang memilih adalah double (39% memilih jawapan ini). Malah, line-height pasti akan menyediakan ketinggian garis dua untuk unsur -unsur yang memohon; Sama ada EM lebih popular daripada peratusan atau orang tidak benar -benar memahaminya. normal Walau bagaimanapun, jawapan yang betul ialah

.

Saya ditanamkan dengan pelajaran ini lama dahulu ketika saya mula -mula belajar CSS. Sentiasa nyatakan line-height sebagai nombor tanpa unit;

Katakan halaman mempunyai saiz fon lalai 12pt, tetapi ia juga mengandungi tajuk dengan saiz fon 24pt. Jika anda menetapkan line-height badan ke 2em (atau 200%) maka anda akan mendapat tepat 24pt (dua kali saiz font badan) ketinggian garis di seluruh dokumen - walaupun dalam tajuk itu. Jadi tajuk akan menjadi ketinggian garis ganda dan bukannya ketinggian garis ganda!

Sebaliknya, menetapkan line-height ke 2 akan memberitahu penyemak imbas untuk mengekalkan nisbah saiz/garis fon walaupun saiz fon berubah. Ketinggian garis badan akan menjadi 24pt, tetapi untuk fon 24pt tajuk, ketinggian garis akan meningkat secara automatik kepada 48pt.

Soalan 2: Cara Membuat Elemen Bertindih

Soalan ini agak rumit. Ia memerlukan pengalaman "kemahiran" yang sering diperlukan oleh susun atur CSS:

Antara atribut CSS berikut yang manakah boleh menyebabkan elemen HTML bertindih?

• z-index
• margin
• overflow
• adakah anda memilih jawapannya? Ok, mari kita masuk ke dalam yang lebih dalam. background
Sekali lagi, terdapat pilihan yang mudah diketepikan: . Semua orang kecuali 2% daripada penguji mengelakkannya kerana mereka tahu ia mengawal warna dan imej latar belakang.

Malangnya, kebanyakan orang memilih

secara langsung. Sehingga 46% memilih jawapan ini. Saya rasa ia adalah kerana tiada siapa yang benar -benar memahami bagaimana

berfungsi. Malah, menetapkan atribut

sahaja tidak mempunyai kesan; Ringkasnya, background membolehkan anda mengawal susunan elemen yang bertindih, tetapi mereka perlu bertindih terlebih dahulu. MDN mempunyai artikel yang sangat baik bertajuk "Memahami CSS Z-Index", yang patut dibaca untuk maklumat lanjut.

Jika anda pernah menggunakan z-index, ia juga harus mudah diketepikan. Ia mengawal tingkah laku kandungan yang tidak sesuai untuk saiz kotak: sama ada ia dipotong, sama ada ia mengalir keluar dari kelebihan kotak, dll. Sekali lagi, ini bergantung kepada sama ada saiz kotak dikekang oleh sifat lain; Namun, 22% fikir ia mungkin. z-index z-index Ini meninggalkan kita dengan hanya position, yang merupakan jawapan yang betul. Hanya 30% orang yang menjawab dengan betul. Anda mungkin ingin tahu bagaimana atribut yang mewujudkan jarak antara unsur -unsur boleh menyebabkan mereka bertindih. Jika anda telah melakukan apa -apa susun atur CSS sebenar, jawapannya harus jelas: margin negatif akan menyebabkan unsur -unsur bertindih. z-index

Untuk menunjukkan ini, buat halaman dengan dua elemen div. Tetapkan margin-top div kedua kepada nilai negatif, seperti -100px. Bang! Div kedua kini meliputi bahagian bawah seratus piksel div pertama.

Dalam praktiknya, anda tidak sengaja bertindih dengan blok seperti ini, tetapi margin negatif sangat berguna untuk memerah elemen HTML ke tempat yang biasanya tidak mereka pergi. Saya sering menggunakannya untuk menolak unsur -unsur yang terapung kiri atau kanan ke kawasan mengisi kotak induk mereka.

Untuk peminat sejarah reka bentuk web, penggunaan elemen bertindih margin negatif pada tahun 2005 membuat tiga susun atur halaman lajur, termasuk apa yang disebut susun atur yang benar (dan kemudian susun atur Holy Grail).

Masalah 3: Pseudo-Elements and Pseudo-Classes

Saya mengakui, soalan terakhir agak hina. Tetapi hanya 23% daripada penguji yang dapat menjawab soalan ini dengan betul (ini lebih buruk daripada nasib!), Dan ia jelas menyentuh titik yang mengelirukan:

Antara kesan berikut yang paling sesuai untuk menggunakan unsur-unsur pseudo untuk dilaksanakan?

Tambahkan bayangan kepada pengguna apabila dia melayari hiperpautan.
Apabila kotak semak dipilih, label kotak semak dipaparkan dalam warna yang berbeza.
Berikan warna latar yang berbeza untuk ganjil dan juga baris meja.
Dalam susun atur halaman yang fleksibel, paparkan baris pertama perenggan sebagai teks berani.

Ketiga pilihan ini adalah semua kesan yang dilaksanakan menggunakan kelas pseudo; Bolehkah anda membezakannya?

kelas pseudo adalah keadaan khusus bahawa elemen HTML sebenar mungkin masuk. Fikirkannya sebagai kelas maya yang pelayar secara automatik akan memohon kepada unsur -unsur di bawah syarat -syarat tertentu.

Pseudo-element adalah sebahagian daripada dokumen, dan walaupun ia bukan elemen HTML yang sebenarnya, CSS membolehkan anda menggayakannya. Ia seperti elemen HTML maya - anda boleh gaya walaupun tidak ada tag HTML yang sebenarnya di sekelilingnya.

dengan perbezaan ini, mari kita lihat pilihan ini:

Tambahkan bayangan kepada pengguna apabila dia melayari hiperpautan.

Hyperlink adalah elemen HTML sebenar. Memohon gaya hanya dalam kes-kes tertentu (apabila tetikus melayang di atasnya) bermakna kita menggunakan kelas pseudo. Dalam kes ini, kelas pseudo yang akan anda gunakan ialah

. :hover

22% daripada penguji menganggap ini sebagai elemen pseudo.

Apabila kotak semak dipilih, label kotak semak dipaparkan dalam warna yang berbeza.

Begitu juga, tag adalah elemen HTML yang sebenarnya, bukan elemen maya. Apabila kotak semak dipilih, penyemak imbas menggunakan kelas pseudo

kepadanya. Anda kemudian boleh menggunakannya dalam pemilih anda untuk gaya kotak semak, atau juga gaya label di sebelahnya (contohnya, menggunakan pemilih saudara bersebelahan :checked).

20% daripada penguji menganggap ini sebagai elemen pseudo.

Berikan warna latar yang berbeza untuk ganjil dan juga baris meja.

Ini adalah soalan yang benar -benar menipu orang, tetapi sekali lagi, kita bercakap tentang menggunakan gaya untuk elemen HTML sebenar (dalam kes ini tr elemen). tr Adakah ia ganjil atau bahkan dalam set elemen kanak-kanak elemen induknya, yang hanya satu lagi kes di mana anda boleh dipadankan dengan kelas pseudo.

Dalam kes ini, kelas pseudo adalah :nth-child(even) (atau :nth-child(2n)) untuk unsur-unsur dan :nth-child(odd) (atau :nth-child(2n 1)) untuk elemen ganjil.

Saya rasa ini hanya kerana :nth-child dan elemen pseudo biasanya terdengar seperti ciri-ciri CSS yang sangat kabur, tetapi 36% penguji memilih ini sebagai elemen pseudo.

Dalam susun atur halaman yang fleksibel, paparkan baris pertama perenggan sebagai teks berani.

Sudah tentu, ini adalah jawapan yang betul. Setakat ini, semoga perbezaannya jelas. Dalam susun atur halaman yang fleksibel, anda tidak dapat melihat kod HTML halaman dan mengatakan "unsur -unsur di sana hanya mengandungi baris pertama teks perenggan". Penyemak imbas membungkus garisan mengikut lebar perenggan, yang anda tidak dapat mengawal dalam susun atur halaman yang fleksibel.

:first-line adalah elemen pseudo yang membolehkan anda menggunakan gaya ke baris pertama teks dalam blok, tanpa mengira di mana baris pertama dipecahkan ke baris kedua.

Jika anda berfikir "okay, itu berbunyi munasabah, tetapi tidak ada yang tahu perbezaan antara elemen pseudo dan kelas pseudo", maka W3C bersetuju dengan anda. Dalam spesifikasi pemilih CSS3, untuk membezakan antara kedua-dua, ia mengubah sintaks supaya pemilih elemen pseudo menggunakan dua kolon (::first-line), manakala kelas pseudo masih menggunakan satu kolon (:hover). Sudah tentu, untuk keserasian mundur, penyemak imbas mesti menyokong kedua -dua versi.

Jadi ya, seperti yang saya katakan: Maksud soalan. Tetapi hei, jika anda geek CSS seperti saya, saya fikir anda akan tahu perbezaan antara elemen pseudo dan kelas pseudo anda.

Bagaimana skor anda?

Ia seperti ini: Tiga teka -teki dalam ujian. Jika anda menjawab salah satu soalan ini dengan yakin, anda melakukan pekerjaan yang baik. Adakah anda menjawab dua dengan betul? tidak teruk. Jika anda menjawab ketiga -tiga dengan betul, saya ingin mendengar apa yang anda fikirkan! Terutama selepas saya memberikan jawapan ini, saya benar -benar memerlukan beberapa soalan CSS yang lebih rumit. Sila hantar mereka dalam komen!

Jika anda suka soalan -soalan ini, mungkin anda ingin mencuba ujian yang lain. Yakinlah, soalan -soalan lain lebih mudah daripada ini ... kebanyakannya!

Atas ialah kandungan terperinci 3 perkara (hampir) tidak ada yang tahu mengenai CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!