Gaya Terhitung dan Pemeriksa Model Kotak

Chrome DevTools → Elemen → tab Terhitung menunjukkan nilai terhitung akhir bagi setiap sifat CSS pada elemen yang dipilih selepas penyelesaian lata, pewarisan dan kekhususan. Panel ini menjawab "apakah yang sebenarnya digunakan?" dan bukannya "apakah yang ditulis?"

Panel Terhitung memaparkan rajah model kotak interaktif yang menunjukkan dimensi kandungan, lapik, sempadan dan jidar bagi elemen yang dipilih. Klik mana-mana dimensi untuk menyerlahkan peraturan CSS yang menetapkannya dan beralih ke panel Gaya.

Taip dalam kotak penapis untuk mencari sifat terhitung tertentu dengan pantas. Tandai "Tunjukkan semua" untuk menyertakan sifat yang diwarisi dan sifat lalai pelayar. Nyah tandainya untuk menunjukkan hanya sifat bukan lalai — laluan terpantas kepada gaya yang digunakan dan berkaitan.

Sifat yang ditunjukkan dalam warna kelabu dalam panel Terhitung diwarisi daripada induk. Klik sifat yang diwarisi untuk beralih ke elemen dan peraturan yang menetapkannya, lalu menjejaki lata tanpa memeriksa induk secara manual dalam penanda.

Menulis margin: 16px 8px mengembangkannya kepada empat nilai terhitung: jidar atas, jidar kanan, jidar bawah dan jidar kiri. Panel Terhitung sentiasa menunjukkan sifat bentuk panjang individu — berguna untuk menyahpepijat masalah jarak tidak simetri.

Nilai warna terhitung sentiasa dalam format rgb() atau rgba(), tanpa mengira cara nilai itu ditulis. Klik petak warna dalam panel Gaya untuk menukar format paparan (hex, hsl, rgb). Panel Terhitung sentiasa menunjukkan warna yang telah diselesaikan.

Periksa saiz fon, keluarga fon, ketinggian baris dan jarak huruf yang terhitung untuk mengesahkan bahawa token tipografi digunakan dengan betul. Fon sandaran pelayar muncul dalam keluarga fon terhitung apabila fon yang diminta gagal dimuatkan.

saiz-kotak: kotak-sempadan menjadikan lebar merangkumi lapik dan sempadan; saiz-kotak: kotak-kandungan (lalai) mengecualikannya. Rajah model kotak dalam DevTools mencerminkan model yang digunakan — bandingkan lebar kandungan dengan lebar keseluruhan untuk mengesahkan kelakuan saiz kotak.

Jidar menegak antara elemen blok bergabung menjadi nilai yang lebih besar antara kedua-duanya. Rajah model kotak menunjukkan jidar berkesan — gunakannya bersama Pemeriksa Susun Atur untuk mengenal pasti jidar yang bergabung dan berbeza daripada nilai yang ditulis.

Panel Gaya menunjukkan semua peraturan yang menyasarkan elemen mengikut susunan kekhususan. Peraturan yang dipotong ditindih. Untuk mencari peraturan yang mengatasi pertikaian sifat: cari pengisytiharan paling atas yang tidak dipotong dalam panel Gaya.

Peraturan helaian gaya ejen pengguna pelayar muncul di bahagian bawah panel Gaya dengan label "helaian gaya ejen pengguna". Panel Terhitung menunjukkan nilai yang telah diselesaikan. Tetapkan semula nilai ini dengan tetapan semula CSS atau Normalize.css untuk mewujudkan asas yang konsisten merentas pelayar.

Panel Gaya Terhitung dan rajah model kotak mendedahkan nilai akhir yang telah diselesaikan bagi semua sifat CSS selepas penyelesaian lata. Gunakannya untuk menjejaki pewarisan, menyahpepijat pengembangan bentuk ringkas, menyiasat saiz kotak dan mengenal pasti peraturan yang mengatasi konflik kekhususan pada mana-mana elemen.