Mengapa Fungsi `calc()` CSS Saya Tidak Berfungsi?

Mengapa Fungsi CSS calc() Tidak Berfungsi?

Anda mungkin menghadapi masalah apabila menggunakan fungsi CSS calc() terutamanya apabila cuba menolak ungkapan yang mengandungi unit px. Ini boleh disebabkan oleh kesilapan biasa: terlupa untuk memasukkan ruang kosong antara operator.

Membetulkan Notasi:

Untuk menyelesaikan isu ini, pastikan terdapat ruang yang memisahkan operator dalam ungkapan calc() anda. Sebagai contoh, bukannya calc(100vw/4-(10px-4)), gunakan calc(100vw/4 - (10px - 4)).

Pengiraan Bersarang:

Fungsi calc() membolehkan anda menyusun pengiraan dalam kurungan, seperti yang dilihat dalam contoh di bawah:

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

Mengurus Pengiraan Dinamik:

Dalam SASS gelung, anda boleh menggantikan x secara dinamik dalam calc(100vw/x-(10px-x)) menggunakan pendekatan berikut:

<code class="sass">@for $i from 1 through 4 {
  .item-#{$i} {
    width: calc(100vw/#{$i} - (10px - #{$i}));
  }
}</code>

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