Garis besar CSS lebih daripada sekadar batas
Ciri garis besar CSS adalah harta yang mengelirukan. Apabila anda mula-mula belajar mengenainya, sukar untuk memahami bagaimana ia jauh berbeza dari harta tanah sempadan. W3C menerangkannya sebagai mempunyai perbezaan berikut:
- Garis garisan tidak mengambil ruang.
- Garis besar mungkin bukan segi empat tepat.
Garis Besar Jangan Ambil Ruang
Kenyataan ini, dalam dan dari itu, mengelirukan. Bagaimanakah objek pada halaman Web anda tidak mengambil ruang pada halaman Web? Tetapi jika anda memikirkan laman web anda sebagai seperti bawang, setiap item pada halaman mungkin berlapis di atas item lain. Harta garisan tidak mengambil ruang kerana ia selalu diletakkan di atas kotak unsur tersebut.
Apabila garis besar diletakkan di sekeliling elemen, ia tidak mempunyai kesan ke atas bagaimana elemen itu dibentangkan pada halaman. Ia tidak mengubah saiz atau kedudukan elemen. Jika anda meletakkan garis besar pada elemen, ia akan mengambil ruang yang sama seolah-olah anda tidak mempunyai garis besar elemen itu. Ini tidak benar pada sempadan. Sempadan pada elemen ditambah kepada lebar dan ketinggian elemen luar. Jadi jika anda mempunyai imej yang lebar 50 piksel, dengan sempadan 2 piksel, ia akan mengambil 54 piksel (2 piksel untuk setiap sempadan sampingan). Imej yang sama dengan garis besar 2-pixel akan mengambil hanya 50 piksel lebar pada halaman anda, garis besar akan dipaparkan di tepi pinggir imej.
Garis Besar Mungkin Tidak Rektangular
Sebelum anda mula berfikir "sejuk, kini saya boleh menarik bulatan!" Fikir semula. Kenyataan ini mempunyai makna yang berbeza daripada yang anda fikirkan. Apabila anda meletakkan sempadan pada elemen, penyemak imbas menafsirkan elemen seolah-olah ia satu kotak segi empat tepat gergasi. Jika kotak akan berpecah beberapa baris, penyemak imbas hanya membuka tepi kerana kotak tidak ditutup. Seolah-olah pelayar melihat sempadan dengan skrin lebar yang luas - cukup lebar untuk sempadan itu menjadi satu segi empat terus berterusan.
Sebaliknya, sifat garis besar mengambil kira pertimbangan. Sekiranya elemen yang digariskan merangkumi beberapa baris, garis besar menutup pada akhir garisan dan membuka semula pada garisan seterusnya. Sekiranya mungkin, garis besar akan kekal bersambung sepenuhnya, mewujudkan bentuk bukan segi empat tepat.
Penggunaan Harta Garis Besar
Salah satu kegunaan terbaik dari ciri garis besar adalah untuk menyerlahkan istilah carian. Banyak laman web melakukan ini dengan warna latar belakang, tetapi anda juga boleh menggunakan ciri garis besar dan tidak bimbang tentang menambahkan jarak tambahan pada halaman anda.
Harta warna garis besar menerima istilah "terbalik" yang menjadikan warna menggariskan kebalikan latar belakang semasa. Ini membolehkan anda menyerlahkan unsur-unsur pada halaman Web dinamik tanpa perlu tahu warna apa yang digunakan .
Anda juga boleh menggunakan ciri garis besar untuk menghilangkan garis putus-putus di sekitar pautan aktif. Artikel ini dari CSS-Tricks menunjukkan cara untuk menghapus garis besar garis.