Mengapa Fungsi calc() Saya Tidak Berfungsi?

Cedera Fungsi Calc(): Mengapa Ia Tidak Berfungsi

Fungsi calc(100vw/4) anda berfungsi seperti yang diharapkan, tetapi fungsi yang lain bukan kerana elemen penting: ruang.

Fungsi CSS calc() memerlukan ruang antara pengendalinya. Ralat biasa termasuk meninggalkan ruang ini, yang membawa kepada ungkapan tidak sah.

Sebagai contoh, ungkapan calc(100vw/4-(10-4)) adalah tidak sah kerana ruang yang tiada antara "-" dan kurungan. Sebaliknya, ia sepatutnya: calc(100vw/4 - (10 - 4)).

Fungsi Calc() Bersarang

Anda boleh menyarangkan fungsi calc() sebagai banyak kali mengikut keperluan, tetapi ia berfungsi dengan cara yang sama seperti kurungan. Contohnya:

<code class="css">calc(100vw/4 - calc(10px - 4px))</code>

Adalah bersamaan dengan:

<code class="css">calc(100vw/4 - (10px - 4px))</code>

Contoh

Berikut ialah contoh fungsi calc() bersarang:

<code class="css">.one {
  width: calc(100% - 150px);
  margin-top: calc(20px + calc(40px * 2));
  height: calc(100px - 10px);
  padding: calc(5% + 10px) calc(5% - 5px);
}</code>

Dalam contoh ini, sifat atas margin menggunakan fungsi calc() bersarang untuk menambah 20px pada hasil darab 40px dengan 2.

Atas ialah kandungan terperinci Mengapa Fungsi calc() Saya Tidak Berfungsi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!