Mengapa CSS Saya calc() Fungsi Kadang-kadang Gagal?

Menyelesaikan Ketidakberkesanan Fungsi CSS calc()

Fungsi CSS calc() memberi kuasa kepada pembangun untuk melaksanakan operasi matematik dalam CSS, mengembangkan keupayaan ekspresifnya. Walau bagaimanapun, halangan boleh timbul apabila menggunakan alat berkuasa ini.

Satu isu lazim yang dihadapi ialah kegagalan yang tidak dijangka bagi sesetengah ungkapan calc() manakala yang lain berfungsi dengan sempurna. Untuk menggambarkan ini, mari kita periksa contoh berikut:

• Ungkapan Betul: calc(100vw/4)

• Ungkapan Tidak Berfungsi:

  • calc (100vw/4-(10-4))
  • calc(100vw/4-(10px-4))
  • calc(100vw/4-(10px-4px))
  • calc(100vw/4-calc(10px-4px))

Kunci untuk menyelesaikan isu ini terletak pada penggunaan ruang yang teliti antara operator. Menghadap ruang ini selalunya mengganggu kelakuan yang diharapkan bagi fungsi tersebut. Dalam contoh yang diberikan, ketiadaan ruang antara operator mengelirukan penghurai, yang membawa kepada tafsiran yang salah.

Untuk membetulkannya, pastikan operator dipisahkan dengan betul oleh ruang. Selain itu, fungsi calc() boleh disarangkan dalam dirinya sendiri untuk melaksanakan operasi yang lebih kompleks, sama seperti menggunakan kurungan.

Dokumentasi rasmi memberikan penjelasan yang jelas tentang peraturan penting ini:

"Pengendali dan - mesti dikelilingi oleh ruang putih. ... Begitu juga, calc(8px -50%) dianggap sebagai panjang diikuti oleh operator penambahan dan peratusan negatif."

"The * dan / pengendali tidak memerlukan ruang kosong, tetapi menambahkannya untuk konsistensi adalah dibenarkan dan disyorkan."

"Ia dibenarkan untuk menyarangkan fungsi calc(), dalam hal ini fungsi dalam dianggap sebagai tanda kurungan mudah."

Dengan mematuhi prinsip ini, anda boleh memanfaatkan potensi penuh fungsi calc(), membuka kunci dunia penggayaan CSS yang tepat dan dinamik.

Atas ialah kandungan terperinci Mengapa CSS Saya calc() Fungsi Kadang-kadang Gagal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!