Cara menggunakan css untuk tidak meninggalkan jurang dalam halaman

Dalam reka bentuk web moden, CSS telah lama menjadi bahagian yang sangat diperlukan. Teknik CSS yang berbeza membolehkan kami mencapai pelbagai kesan ajaib dan menjadikan halaman web kelihatan lebih cantik dan profesional. Hari ini, kita akan membincangkan teknik CSS lanjutan: tidak meninggalkan jurang.

Apa yang dipanggil "tidak meninggalkan jurang" merujuk kepada mengalih keluar sepenuhnya jurang antara elemen dalam reka letak halaman web, menjadikan halaman kelihatan lebih cantik dan kemas. Teknik ini memerlukan pembelajaran dan aplikasi beberapa pengetahuan CSS Beberapa kaedah pelaksanaan akan diperkenalkan secara terperinci di bawah untuk membantu pembaca menguasai teknik ini dengan lebih baik.

1. Pertama sekali, kita perlu menyelesaikan masalah jurang yang disebabkan oleh sempadan. Apabila menentukan sempadan elemen, jika tiada pemprosesan khas dilakukan, masalah jarak sempadan akan berlaku. Ini kerana gaya sempadan itu sendiri mempunyai lebar lalai, dan jarak antara elemen juga disebabkan oleh lebar ini. Oleh itu, kita perlu menambah margin negatif pada elemen untuk mengimbangi offset yang disebabkan oleh lebar sempadan dan jurang.

Sebagai contoh, jika anda mentakrifkan sempadan 1px pada div, maka anda perlu menetapkan margin-kiri dan margin-kanan div masing-masing kepada -1px.

div{

border:1px solid #000;
margin-left:-1px;
margin-right:-1px;

}

2. Seterusnya, kita perlu menyelesaikan masalah ruang putih yang disebabkan oleh unsur terapung. Konsep elemen terapung adalah mudah: ia mengeluarkan elemen daripada aliran dokumen biasa dan membenarkan ia terapung di sekeliling elemen lain. Walau bagaimanapun, apabila pelbagai elemen terapung disusun bersama, masalah ruang putih juga boleh berlaku. Ini kerana elemen terapung itu sendiri tidak menempati ruang dalam aliran dokumen, dan ruang putih di antara mereka disebabkan oleh kekurangan ruang ini.

Cara untuk menyelesaikan masalah ini adalah dengan menggunakan beberapa peraturan CSS mudah untuk menjajarkan elemen terapung dengan jidar bersebelahan, supaya ia sejajar. Kaedah ini sering dipanggil "membersihkan pelampung."

.clearfix::after{

content:"";
clear:both;
display:block;

}

.clearfix{

zoom:1;

}

dalam kod ini , kami mencipta elemen pseudo dengan menggunakan pemilih CSS "::after", yang memainkan peranan penting dalam "membersihkan terapung". Kami mentakrifkan unsur pseudo sebenar ini sebagai "blok" dan biarkan ia mengosongkan keadaan terapung elemen untuk mengatur kedudukan unsur terapung dan mengelakkan jurang.

3. Akhir sekali, mari kita bincangkan kesan margin negatif pada reka letak. Dalam reka bentuk susun atur sebenar, anda mungkin mahu melaraskan kedudukan dan saiz elemen dengan menetapkan margin negatif. Walau bagaimanapun, dalam reka bentuk CSS, margin negatif boleh menyebabkan elemen bertindih, yang seterusnya menjejaskan kesan keseluruhan reka letak.

Untuk menyelesaikan masalah ini, kita boleh menggunakan fungsi "calc()" dalam CSS3, yang secara automatik boleh memadankan kedudukan dan saiz elemen melalui pengiraan untuk mengelakkan pertindihan.

Sebagai contoh, berikut ialah contoh kod:

div{

width:calc(50% - 10px);
margin-right:20px;

}

Dalam contoh ini, kami menggunakan "calc() " berfungsi untuk mengira lebar elemen supaya ia menduduki separuh lebar elemen induk, memangkas jidar 10px dan meninggalkan 20px ruang putih di sebelah kanan elemen.

Ringkasnya, CSS tanpa jurang ialah teknologi CSS yang sangat maju yang memerlukan pembaca memahami dan menguasai pengetahuan CSS yang mendalam. Tetapi kami masih berharap pembaca akan menguasai teknologi ini, kerana ia boleh menjadikan reka bentuk web anda lebih sempurna dan cantik.

Atas ialah kandungan terperinci Cara menggunakan css untuk tidak meninggalkan jurang dalam halaman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!