css terus berjalan

Dengan perkembangan Internet yang semakin meningkat, CSS, sebagai salah satu teknologi penting dalam pembangunan bahagian hadapan, telah menjadi bahagian yang amat diperlukan dalam reka bentuk dan pembangunan web. Dalam CSS, kami sering menghadapi beberapa situasi yang tidak konsisten, yang mungkin menjejaskan kesan paparan halaman web. Artikel ini akan memperkenalkan pengetahuan yang berkaitan tentang kesinambungan CSS dan menyediakan beberapa penyelesaian.

1. Apakah itu CSS

Dalam CSS, ia biasanya melibatkan susunan taip dan susun atur kandungan seperti teks atau imej. Semasa proses ini, kita sering mendapati bahawa beberapa elemen mungkin tidak berfungsi. Khususnya, elemen berbeza menduduki baris eksklusif dan tidak akan dipaparkan pada baris yang sama dengan elemen lain.

2. Sebab CSS tidak berjalan

Punca CSS tidak berjalan adalah disebabkan oleh saiz model kotak yang tidak sesuai atau tetapan atribut yang tidak betul bagi elemen. Berikut ialah beberapa sebab biasa untuk pelaksanaan terhenti:

(1) Tetapan lebar kotak tidak sesuai.

Jika lebar elemen ditetapkan terlalu besar, ia akan melebihi saiz tetingkap penyemak imbas, menyebabkan elemen lain tidak muat pada baris yang sama dengannya.

(2) Unsur terapung.

Jika atribut terapung ditetapkan dalam elemen, elemen akan berpisah daripada aliran dokumen biasa dan elemen lain akan menyesuaikan diri mengikut ketinggian dan lebarnya, menyebabkan elemen di bawahnya tidak dipaparkan pada baris yang sama dengannya.

(3) Elemen peringkat blok.

Jika elemen ialah elemen peringkat blok, maka elemen itu akan menduduki barisnya sendiri secara lalai. Contohnya, tag div dan p, dsb.

(4) Elemen berkedudukan mutlak.

Jika elemen ditetapkan kepada kedudukan mutlak, ia akan terkeluar sepenuhnya daripada aliran dokumen dan elemen lain tidak boleh dipaparkan pada baris yang sama dengannya.

(5) Elemen sebaris.

Jika elemen ialah elemen sebaris, walaupun ia ditetapkan pada baris yang sama dengan elemen lain, teks dan imej akan menyebabkan pembalut baris automatik dan akhirnya dipaparkan pada baris seterusnya.

3 Kaedah untuk menyelesaikan masalah CSS tidak berjalan

Untuk situasi di atas, jika kita ingin menyelesaikan masalah mereka, kita boleh mengambil kaedah berikut:

( 1) Sediakan kotak Saiz

Apabila lebar atau tinggi sesuatu elemen terlalu besar untuk dimuatkan dengan sewajarnya pada baris yang sama, kita boleh mengubah suai saiznya supaya ia boleh dipaparkan dengan sewajarnya pada baris yang sama .

(2) Kosongkan apungan

Apabila elemen mempunyai set atribut apungan dan elemen lain tidak boleh dipaparkan pada baris yang sama, kita boleh menyelesaikan masalah dengan mengosongkan apungan. Kaedahnya adalah seperti berikut:

.clearfix{
    clear:both;
}
.parent::after{
    content:"";
    clear:both;
    display:block;
}

(3) Ubah suai elemen kepada elemen sebaris

Apabila elemen ialah elemen peringkat blok dan kami mahu ia dipaparkan pada baris yang sama, kita boleh mengubahnya Tukar kepada elemen sebaris dan tambah atribut apungan.

(4) Tetapkan pembalut baris teks

Apabila elemen ialah elemen sebaris, tetapi teks atau imej di dalamnya menyebabkan pembalut baris, kita boleh menambah perkataan- dalam atribut CSS elemen . sifat balut dan ruang putih untuk mencapai pembalut teks.

p{
    word-wrap:break-word;
    white-space:pre-wrap;
}

(5) Tetapkan ketinggian baris

Apabila elemen ialah elemen sebaris, kita boleh menetapkan ketinggian baris untuk memaparkannya dengan sewajarnya pada baris yang sama. Contohnya:

p{
    line-height:1.5em;
}

4. Ringkasan

CSS tidak berjalan ialah masalah biasa dalam pembangunan bahagian hadapan. Semasa pembangunan, kita perlu memberi perhatian kepada susun atur dan tipografi antara elemen, dan memahami sebab dan penyelesaian untuk ketakselanjaran. Hanya selepas kami menguasai kemahiran ini kami boleh menyelesaikan masalah yang berterusan dengan cepat dan berkesan serta memberikan kesan visualisasi yang lebih baik untuk paparan halaman web.

Atas ialah kandungan terperinci css terus berjalan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!