Rumah > Artikel > hujung hadapan web > Mengapa Fungsi CSS calc() Saya Tidak Berfungsi?
Menyelesaikan masalah Fungsi CSS calc()
Fungsi calc() dalam CSS ialah alat yang berkuasa untuk melaksanakan pengiraan pada nilai. Walau bagaimanapun, kadangkala ia boleh rosak disebabkan oleh kesilapan atau salah faham. Satu isu biasa ialah dengan jarak yang tidak betul.
Keperluan untuk Jarak
Pengendali dalam ungkapan calc() mesti dipisahkan dengan ruang. Mengabaikan peraturan ini boleh menyebabkan penghuraian yang salah, seperti yang ditunjukkan oleh contoh yang disediakan:
calc(100vw/4-(10-4)) // Incorrect (no space after '-') calc(100vw/4-(10px-4)) // Incorrect (no space after 'px') calc(100vw/4-(10px-4px)) // Incorrect (no space before and after '-', no space between 'px')
Untuk menyelesaikan masalah ini, cuma perkenalkan ruang seperti berikut:
calc(100vw/4 - (10 - 4)) calc(100vw/4 - (10px - 4)) // Optionally, space before 'px' for consistency
Ekspresi Bersarang
fungsi calc() boleh bersarang antara satu sama lain, bertindak seperti kurungan mudah. Walau bagaimanapun, adalah penting untuk mengikuti peraturan jarak yang sama untuk ungkapan bersarang. Contohnya:
calc(100vw/4 - calc(10px - 4px)) // Outer and inner expressions spaced correctly
Bekerja dengan Pembolehubah
Dalam gelung SASS, pembolehubah boleh digantikan dalam ungkapan calc(). Untuk memastikan pengiraan yang betul, pastikan pembolehubah dimasukkan dengan betul dalam kurungan dan operator mempunyai jarak yang betul. Contohnya, untuk mengurus ungkapan calc(100vw/x-(10px-x)) di mana x digantikan dalam gelung SASS:
calc(100vw / ($x) - (10px - $x)) // Spaces around operators, parentheses around variable
Dengan mengikut peraturan ini, anda boleh menyelesaikan masalah dan memanipulasi calc dengan berkesan () berfungsi dalam kod CSS anda. Ingat untuk menambah ruang antara operator, ungkapan sarang dengan berhati-hati dan gunakan kurungan untuk pembolehubah dalam calc().
Atas ialah kandungan terperinci Mengapa Fungsi CSS calc() Saya Tidak Berfungsi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!